如何让Webpack监听新增的入口文件？

我目前有一个webpack.config.js配置文件，能够根据src/目录下的Pug模板生成对应的HTML文件，配置代码如下：

const glob = require('glob');
module.exports = {
 entry: glob.sync('src/*.pug').reduce((acc, value) => {
 acc[value] = './' + value;
 return acc;
 }, {}),
 output: {
 filename: '[name].js',
 publicPath: '/'
 },
 module: {
 rules: [
 { test: /\.pug$/,
 use: [
 "file-loader?name=[name].html",
 "extract-loader",
 "html-loader",
 "pug-html-loader"
 ]
 },
 ]
 }
};

当前配置运行正常，启动webpack-dev-server后可以正常访问页面，但我希望Webpack能够自动监听新增的Pug入口文件，不需要每次重启dev-server。请问该如何实现这个需求？

核心问题在于你现在的entry是通过glob.sync()在Webpack启动时一次性生成的，当新增文件时，Webpack不会主动重新扫描入口。要解决这个问题，我们可以通过以下方式实现动态监听新增入口：

方式1：用动态入口函数+配置监听规则 #

把入口配置改成一个函数，这样Webpack在每次重新编译时都会重新执行这个函数来获取最新的入口列表，同时配置watchOptions确保监听src/目录下的所有文件变化（包括新增文件）：

const glob = require('glob');

// 改成函数式配置，支持动态更新入口
module.exports = () => ({
 entry: () => glob.sync('src/*.pug').reduce((acc, value) => {
  acc[value] = './' + value;
  return acc;
 }, {}),
 output: {
  filename: '[name].js',
  publicPath: '/'
 },
 module: {
  rules: [
   { 
    test: /\.pug$/,
    use: [
      // 改用对象写法更易维护
      {
        loader: 'file-loader',
        options: {
          name: '[name].html'
        }
      },
      "extract-loader",
      "html-loader",
      "pug-html-loader"
    ]
   },
  ]
 },
 watchOptions: {
  // 忽略node_modules，提升监听效率
  ignored: /node_modules/,
  // 设置延迟，避免文件保存时频繁触发编译
  aggregateTimeout: 300
 }
});

这样修改后，当你在src/目录下新增Pug文件时，Webpack会自动重新扫描入口并编译对应的HTML文件，dev-server也会自动刷新页面。

额外提示 #

• 确保启动webpack-dev-server时开启了watch模式（默认已经开启，也可以显式加上--watch参数）；
• 如果你的Webpack版本较低，函数式入口可能需要配合webpack-dev-server的热更新配置一起使用，但目前主流版本都支持这种写法。

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