Webpack dev-server 不会使用 pug-plugin 自动重新加载？

Question

更改文件内容后，我的开发服务器不会自动重新加载。你能帮我理解一下，我需要在我的配置中更改什么吗？

这是我的代码：

module.exports = {
    entry: {
        index: './src/index.pug',
    },
    output: {
        path: path.join(__dirname, 'dist/'),
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist/')
        },
        hot: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.(s*)css$/,
                use: ['css-loader', 'sass-loader'],
            },
            {
                test: /.pug$/,
                loader: PugPlugin.loader, // Pug loader
            },
        ]
    },
    optimization: {
        minimizer: [
            `...`,
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [
        new StylelintPlugin(),
        new PugPlugin({
            pretty: true,
            js: {
                filename: '[name].js',
            },
            css: {
                filename: '[name].css',
            },
        })
    ],
    mode: 'development',
    devtool: 'source-map',
}

我看了控制台上的内容，它说它没有看到任何变化？？？

Answer 1

添加到 devServer

watchFiles

选项：

module.exports = {
  // enable HMR with live reload
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    watchFiles: {
      paths: ['src/**/*.*'],
      options: {
        usePolling: true,
      },
    },
  },
};

重要：

仅当在 Pug 模板中最后定义了一个 JS 文件时，实时重新加载才有效。 如果您的模板不包含 JS，则添加一个空的 JS 文件：

script(src=require('./hot-update.js'))

，Webpack 在编译时自行将 HMR 代码添加到空 JS 文件中。

请参阅文档如何设置 HMR（实时重新加载）