Webpack5安装html-bundler-webpack-plugin后DevServer无法自动重载文件

你的问题核心在于插件监听范围不全、devServer配置冲突以及热重载未启用，以下是具体修复方案：

1. 扩展插件的监听文件类型 #

html-bundler-webpack-plugin的watchFiles仅配置了HTML类文件，未包含SCSS，导致修改SCSS时插件不会触发重新编译，devServer自然检测不到资源变化。修改插件配置中的watchFiles.files，加入SCSS类型：

watchFiles: {
  paths: ['./src'],
  files: [/\.(html|ejs|eta|scss)$/], // 新增SCSS文件监听
  ignore: [
    /[\\/](node_modules|dist|test)$/,
    /[\\/]\..+$/,
    /package(?:-lock)*\.json$/,
    /webpack\.(.+)\.js$/,
    /\.(je?pg|png|ico|webp|svg|woff2?|ttf|otf|eot)$/,
  ],
}

2. 简化devServer的watch配置 #

插件已负责监听src目录下的源文件，devServer无需重复配置复杂的通配规则，甚至可以直接移除devServer.watchFiles——devServer默认会监听static.directory（即dist目录）下的输出文件，插件编译后dist目录更新，devServer会自动触发重载。若保留watch配置，建议简化为：

devServer: {
  static: {
    directory: path.resolve(__dirname, 'dist')
  },
  watchFiles: ['./src'], // 仅监听src根目录，避免通配符冲突
  port: 3000,
  open: true,
  hot: true, // 开启热重载
  // compress:true, 
  // historyApiFallback:true,
},

3. 启用devServer热重载 #

取消注释hot: true，开发模式下热重载能更高效触发资源更新，配合插件编译逻辑，确保修改后浏览器自动重载。

修改后的完整配置 #

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

module.exports = {
  mode: 'development',

  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },

  resolve: {
    alias: {
      '@scripts': path.join(__dirname, 'src/js'),
      '@styles': path.join(__dirname, 'src/scss'),
      '@images': path.join(__dirname, 'src/images'),
    },
  },

  plugins: [
    new HtmlBundlerPlugin({
      entry: 'src/views/',
      js: {
        filename: 'js/[name].[contenthash:8].js',
      },
      css: {
        filename: 'css/[name].[contenthash:8].css',
      },

      watchFiles: {
        paths: ['./src'],
        files: [/\.(html|ejs|eta|scss)$/], // 新增SCSS监听
        ignore: [
          /[\\/](node_modules|dist|test)$/,
          /[\\/]\..+$/,
          /package(?:-lock)*\.json$/,
          /webpack\.(.+)\.js$/,
          /\.(je?pg|png|ico|webp|svg|woff2?|ttf|otf|eot)$/,
        ],
      }
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
      {
        test: /\.(ico|png|jp?g|svg)/,
        type: 'asset',
        generator: {
          filename: 'images/[name].[hash:8][ext]',
        },
        parser: {
          dataUrlCondition: {
            maxSize: 2 * 1024,
          },
        },
      },
    ],
  },
 
  devServer: {
    static:{
      directory: path.resolve(__dirname, 'dist')
    },
    watchFiles: ['./src'], // 简化监听路径
    port:3000, 
    open: true, 
    hot:true, // 启用热重载
    // compress:true, 
    // historyApiFallback:true,
  },
};

额外排查点 #

• 若问题仍存在，可尝试注释掉devServer.watchFiles，完全依赖插件的watch触发编译，devServer监听dist目录变化即可。
• 确保html-bundler-webpack-plugin为最新版本，旧版本可能存在watch逻辑bug。

内容的提问来源于stack exchange，提问作者Legend10