Question

我尝试使用webpack 2设置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上以root身份提供index.html，但是当我编辑我的scss时，我的页面没有重新加载。此外，我必须在一个单独的终端中运行webpack --watch，以便在我在浏览器中手动重新加载页面时查看更改。

如何解决这两个问题？

Answer 1

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

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

并将HotModuleReplacementPlugin添加到您的插件中：

new webpack.HotModuleReplacementPlugin()

如Guides - Hot Module Replacement React所示（只是没有react-hot-loader）。

或者，您可以使用--hot CLI标志为您启用它，而无需更改配置。

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

编辑.scss文件后重新加载是另一个问题，因为您使用extract-text-webpack-plugin并且浏览器中的HMR会告诉您没有任何更改，尽管它重新编译了捆绑包，因为它没有＆＃39;观察输出的CSS文件。要解决这个问题，您可以使用disable option禁用开发中的提取文本插件，这会使其回退到您配置的style-loader。您需要在插件部分中将其更改为：

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

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

您可能正在从文件系统提供文件，而不是从webpack-dev-server获取内存中的文件，而{1}}不会将任何文件写入磁盘。您正在导入html-webpack-plugin但未实际使用它。将其添加到插件部分webpack-dev-server后，当您访问http://localhost:8080/时，也会从内存中提供HTML文件。

编辑文件时，webpack 2 livereload无法正常工作

1 个答案: