Configuration 将输入和输出定义从package.json移动到Webpack.config.js时，Webpack 2 livereload不工作

这有点奇怪。我知道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“server”键更改为：

实时重新加载将再次工作

我在webpack.config.js中定义了“entry”和“output”键，所以我认为它应该可以工作。。。但“在文件编辑时”，不会触发重新加载。我的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')
  ],
}

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' 
  }
}

-固定的- 这段视频帮助我修复了它：

我把空的东西移走了

  {
    // second rule
  }

我移动了webpack.config.js末尾的

output

键。 在

output

中，我添加了

publicPath

（以便服务器知道在哪里监视其他文件）。我还删除了

路径

键中

距离

后的斜杠（

/

）

  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'
          ]
        })
      },
      {
        // second rule
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: 'bundle.js'
  },
  plugins: [
    new ExtractTextPlugin('bundle.css')
  ],
}

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' 
  }
}