Webpack watch仅监听package.json变更，如何实现全文件监听编译？

已在webpack.config.js中配置watch: true，期望Webpack监听所有文件变更并自动编译，但通过npm run build执行时，仅修改package.json会触发编译，其他文件夹下的文件变更无反应。

修复步骤 #

1. 强制运行在开发模式 #

Webpack在生产模式（production）下会默认禁用watch特性，即便手动设置watch: true也可能失效。修改package.json的build命令，指定开发模式：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  }
}

2. 调整watchOptions，启用文件轮询 #

部分文件系统无法被Webpack默认监听机制检测到，添加poll选项强制轮询文件状态：
修改webpack.config.js中的watchOptions：

watchOptions: {
  ignored: /node_modules/,
  poll: 1000, // 每1秒轮询一次文件
  aggregateTimeout: 300 // 延迟300ms触发编译，避免重复执行
}

3. 确认依赖文件被正确追踪 #

• 检查entry配置的入口文件（src/ui.tsx、src/code.ts）及其依赖的所有文件，确保未被ignored规则排除。
• 验证HtmlWebpackPlugin的模板文件src/ui.html路径正确，Webpack会自动监听该文件的变化。

4. 检查TypeScript配置 #

确保tsconfig.json的include字段包含src目录，让ts-loader正确传递依赖关系给Webpack：

{
  "include": ["src/**/*"]
}

完成以上修改后，执行npm run build，修改src下的任意文件（如ui.tsx、code.ts），即可触发Webpack自动编译。

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