webpack - Webpack-Serve 的 HMR 不会在包含的 pug 文件上重新加载

Question

早上好。我有带有 pug-loader 的 webpack。

当我在另一个 pug 文件中包含一个 pug 文件时，Webpack 会编译新的 HTML，但 Webpack Serve 不会更新页面。我该如何解决？

我有想法将 pug 文件要求/导入到 JS 文件中，但我认为这不是最好的方法。

UPD：Webpack-服务日志

｢hot｣ App updated. Recompiling src/blocks/top-bar/top-bar.pug 
｢hot｣ webpack: Compiling (<unnamed compiler>) 
｢hot｣ App Updated, Reloading Modules 
｢hot｣ Checking for updates to the bundle. 
｢hot｣ The following modules were updated:
         ↻ ./src/pug/index.pug scripts.d3ae262374b4cae61b91.js:20371:5
｢hot｣ App is up to date.

指数.pug

doctype html
html
    head
        title Hello world
        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1')
    //- Mixins
    include _mixins.pug
body
    include ../blocks/top-bar/top-bar.pug
    include ../blocks/header/header.pug
    link(rel='stylesheet' href='https://use.fontawesome.com/releases/v5.1.0/css/all.css')

webpack.development.config.js

const entry = require('webpack-glob-entry');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const isObjectEmpty = require('is-empty-object');
const webpackServeWaitpage = require('webpack-serve-waitpage');

// Plugin Declaration
const plugins = [];
plugins.push(
new CleanWebpackPlugin(['build']),
new ExtractTextPlugin({
    filename: 'css/styles.bundle.css',
}),
new WebpackBuildNotifierPlugin({
    title: 'Webpack Build',
    suppressSuccess: true,
    suppressWarning: true,
    sound: 'submarine',
}),
);

// Other files moving
// Fonts
const fonts = entry('src/fonts/*.{ttf,otf,woff,woff2,eot,svg}');
if (!isObjectEmpty(fonts)) {
plugins.push(
    new CopyWebpackPlugin([{
        from: './src/fonts/',
        to: './fonts',
        toType: 'dir',
    }]),
);
}

// Videos
const videos = entry('src/videos/*.{mp4,avi,mov}');
if (!isObjectEmpty(videos)) {
    plugins.push(
    new CopyWebpackPlugin([{
        from: './src/videos/',
        to: './videos',
        toType: 'dir',
    }]),
);
}

// HTML Plugins
const htmlPagesObject = entry('./src/pug/*.pug');
for (const key in htmlPagesObject) {
    if (Object.prototype.hasOwnProperty.call(htmlPagesObject, key)) {
        plugins.push(
        new HtmlWebpackPlugin({
            filename: `${htmlPagesObject[key].split('./src/pug/')[1].split('.pug')[0]}.html`,
            template: `${htmlPagesObject[key]}`,
        }),
    );
}
}

module.exports = {
    serve: {
    content: './src/',
    hot: {
        autoConfigure: 'true',
        allEntries: true,
        port: 3000,
        hmr: true,
    },
    add: (app, middleware, options) => {
        app.use(webpackServeWaitpage(options, {
            theme: 'material',
        }));
        middleware.webpack();
        middleware.content();
    },
},
// Settings
devtool: 'source-maps',
mode: 'development',

// Entry / Output Declaration
entry: entry('./src/js/*.js'),
output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'js/[name].[hash].js',
    library: 'bundle_[name]',
},

// Loaders Declaration
module: {
    rules: [
        // JS Linting
        {
            test: /\.js$/,
            use: [{
                loader: 'eslint-loader',
                options: {
                    sourceMaps: true,
                    emitError: true,
                    failOnError: true,
                },
            }],
        },
        // HTML Processing
        {
            test: /\.pug$/,
            include: path.resolve(__dirname, 'src/'),
            loader: 'pug-loader',
            options: {
                pretty: true
            }
        },
        // SCSS Processing
        {
    test: /\.(sass|scss)$/,
    include: path.resolve(__dirname, 'src/'),
    use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
                publicPath: '../',
      use: [{
          loader: "css-loader",
          options: {
            sourceMap: true,
            minimize: true,
            url: true
          }
        },
        {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true,
                            includeRoot: true,
                            root: './../',
                        },
                    },
                    // {
        {
          loader: "sass-loader",
          options: {
            sourceMap: true
          }
        }
      ]
    }))
  },

        // Images Processing
        {
            test: /\.(jpe?g|png|gif|svg|webp)$/i,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'img/',
                    limit: 1024,
                },
            }],
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/',
                },
            }],
        },
    ],
},

optimization: {
    namedModules: true,
    namedChunks: true,
    runtimeChunk: {
  name: 'tools',
},
splitChunks: {
  cacheGroups: {
    default: false,
    commons: {
      test: /\.js$/,
      chunks: 'all',
      minChunks: 2,
      name: 'tools',
      enforce: true,
    },
  },
},

},

// Include Plugins
plugins,
};

项目结构