webpack 开发服务器监视多个静态文件

Question

我可以使用 webpack 开发服务器查看多个静态页面，但我想查看 index.html 文件以外的文件的实时重新加载。在这种情况下，如果我对模板进行更改，我希望我的 other.html 文件重新加载。在我的 package.json 我正在运行 "serve:js": "webpack serve --mode development"

这是我当前的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    assetModuleFilename: 'assets/[hash][ext][query]',
},
devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    watchContentBase: true,
    open: true,
},

module: {
    rules: [``
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                },
            },
        },
        {
            test: /\.(scss|css)$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
            test: /\.(png|jpg|gif)$/i,
            type: 'asset/resource',
        },
        {
            test: /\.html$/i,
            loader: 'html-loader',
        },
    ],
},
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html',
        inject: 'body',
    }),
    new HtmlWebpackPlugin({
        filename: 'other.html',
        template: './src/other.html',
        inject: 'body',
    }),
    ],
};