webpack-dev-server无法在html或sass更改时重新加载

Question

我的项目具有以下结构：

\root    
   \webpack.config.js
   \public
     \ index.html
     \ ...
     \ css
     \ directives
     \ views   
     \ dist (webpack output)
       \app.js
       \ index.html
       \ app.js.map   
       \ style.css
       \ style.css.map

当我使用webpack-dev-server时，我从/ root启动它并加载应用程序。但是，当我更改sass文件或html文件时，它不会重新加载。webpack配置有什么问题？

启动webpack的命令：

$ cd root
$ webpack-dev-server

Webpack.config.js

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

const webConfig = {
  entry: path.join(__dirname, 'public', 'js', 'app'),
  output: {
    path: path.join(__dirname, 'public', 'dist'),
    filename: 'app.js'
  },
  resolve: {
    modules: [__dirname, 'node_modules'],
    extensions: ['.js'],
    enforceExtension: false,
  },
  devtool: 'source-map',
  devServer:{
    contentBase: 'public/',
    publicPath: 'public/'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader?modules,localIdentName=[name]__[local]--[hash:base64:5]!sass-loader'
        }),
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

module.exports = webConfig;

Answer 1

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

对于 webpack 5，您将需要使用以下选项watchFiles：

devServer: {
  watchFiles: ["./public/*"], // string [string] object [object]
  port: 3000,
  open: true,
  hot: true,
},

查看有关watchFiles 选项的官方文档。

Answer 2

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

“内联”选项为整个页面添加“实时重新加载”。“ hot”选项启用“ Hot Module Reloading”，尝试仅重新加载已更改的组件（而不是整个页面）。如果我们同时传递了这两个选项，则当源更改时，webpack-dev-server将首先尝试执行HMR。如果这不起作用，则它将重新加载整个页面。

尝试将其添加到您的webpack.config文件中：

devServer:{
    contentBase: 'public/',
    publicPath: 'public/',
    inline: true,
    hot: true,
  },

如果需要，还可以从package.json文件中调用脚本。像这样的东西：

...
scripts: {
   "watch": "webpack-dev-server --progress --colors --hot --inline",
}
...