- 已修复 -

Question

这有点奇怪。我知道webpack对于它的配置设置非常挑剔，但这是一个非常基本的例子：

的package.json

{
  "name": "webpactest",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js",
  "scripts": {
    "server": "webpack-dev-server",
    "build": "rm -rf ./dist && webpack -d --watch",
    "build:prod": "rm -rf ./dist && webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.5.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

如果我更改了package.json＆＃34; server＆＃34;关键是：

"server": "webpack-dev-server --entry ./src/app.js --output-filename ./dist/bundle.js",

实时重新加载将再次有效。

我定义了＆＃34;条目＆＃34;和＆＃34;输出＆＃34; webpack.config.js中的键，所以我认为它应该可以工作......但是＆＃34;在文件编辑＆＃34;上，没有触发重载。我的webpack.config.js配置有什么问题？

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

module.exports = {
  entry: [
    path.resolve(__dirname, "src/app.js"),
    path.resolve(__dirname, "src/sass/main.sass")
  ],
  module: {
    rules: [
      {
        test: /\.sass$/,
        include: [
          path.resolve(__dirname, "./src/sass")
        ],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true,
                options: { sourceMap: true }
              }
            }, 
            'sass-loader'
          ]
        })
      },
      {
        // second rule
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: 'bundle.js'
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ],
}

Answer 1

- 已修复 -

这段视频帮助我解决了这个问题： THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

我删除了空对象

  {
    // second rule
  }

我在webpack.config.js的末尾移动了output键。在output中，我添加了publicPath（以便服务器知道在哪里查看其他文件）。我还在/密钥中的dist后删除了斜杠（path）。

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist' 
  }

现在，实时重新加载正在运行，我的配置文件如下所示：

<强> webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

module.exports = {
  entry: [
    path.resolve(__dirname, "src/app.js"),
    path.resolve(__dirname, "src/sass/main.sass")
  ],
  module: {
    rules: [
      {
        test: /\.sass$/,
        include: [
          path.resolve(__dirname, "./src/sass")
        ],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true,
                options: { sourceMap: true }
              }
            }, 
            'sass-loader'
          ]
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist' 
  }
}

将输入和输出定义从package.json移动到webpack.config.js时，Webpack 2 livereload无法正常工作

1 个答案:

- 已修复 -