当我编辑文件时，webpack 2 livereload不工作

我正在尝试用Webpack2设置Livereload。显然，实现这一点的方法是启用HMR。所以，我在配置中做了这个

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    entry: './app/src/scripts/index.js',
    output: {
        filename: 'app.js',
        path: path.resolve('app/assets/js')
    },
    module: {
        rules: [
        {
            test: /\.scss$/, 
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'sass-loader']
            })
        }
        ]
    },
    plugins: [
        new ExtractTextPlugin('../css/style.css')
    ],
    devServer: {
        hot: true,
        compress: true,
        port: 8080,
        publicPath: 'http://localhost:8080/',
        clientLogLevel: 'none',
        contentBase: (__dirname, './'),
        watchContentBase: true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        }
    }
};

我的package.json如下所示

"scripts": {
    "watch": "webpack --progress --colors --watch",
    "build": "webpack --progress --colors",
    "deploy": "NODE_ENV=production webpack -p --progress --colors",
    "start": "webpack-dev-server"
  },

我正在尝试执行

npm start

，它在端口8080的根目录下提供index.html，但是当我编辑我的SCS时，我无法重新加载页面。此外，我还必须在单独的终端上运行

webpack--watch

，以查看在浏览器中手动重新加载页面时所反映的更改

---

如何解决这两个问题？

要启用热模块更换，您还需要将条目更改为：

entry: [
  'webpack-dev-server/client?http://localhost:8080',
  'webpack/hot/only-dev-server',
  './app/src/scripts/index.js'
],

并将

HotModuleReplacementPlugin

添加到您的插件中：

new webpack.HotModuleReplacementPlugin()

如中所示（不带

react热加载程序

）

或者，您可以使用

--hot

CLI标志为您启用它，而无需更改配置

"start": "webpack-dev-server --hot"

在编辑

.scss

文件后重新加载是另一个问题，因为您正在使用

提取文本网页包插件

，浏览器中的HMR将告诉您没有任何更改，尽管它重新编译了捆绑包，因为它不会查看输出的CSS文件。为了解决这个问题，您可以使用its禁用开发中的extract text插件，这使得它可以退回到您配置的

样式加载程序。您需要在插件部分将其更改为：

new ExtractTextPlugin({
  filename: '../css/style.css',
  disable: process.env.NODE_ENV !== 'production'
}),

此外，我还必须在单独的终端上运行
webpack--watch
，以查看在浏览器中手动重新加载页面时所反映的更改

您可能是在为文件系统中的文件提供服务，而不是从
webpack dev server
获取内存中的文件，后者不会将任何文件写入磁盘。您正在导入
html网页包插件
，但实际上没有使用它。将其添加到插件部分后，当您访问
webpack时，dev server
也将从内存中提供HTML文件http://localhost:8080/

太棒了！非常感谢。