Webpack watch模式结合html-webpack与clean-webpack插件失效问题咨询

不用移除clean-webpack-plugin的！我之前也遇到过一模一样的问题，给你两个实用的解决方案：

方案一：禁用clean-webpack-plugin的“删除过期资源”功能 #

问题的核心是clean-webpack-plugin默认会把当前构建没生成的文件判定为过期资源删掉，而watch模式下修改非HTML文件时，HtmlWebpackPlugin不会重新生成HTML（因为模板没改），所以HTML就被误删了。

只需要给CleanWebpackPlugin添加cleanStaleWebpackAssets: false配置即可：

new CleanWebpackPlugin({
  // 关闭删除未被当前构建生成的旧资源
  cleanStaleWebpackAssets: false
}),

这个配置不会影响首次构建时清空dist目录的功能，只是在watch的增量构建中保留之前生成的、本次没更新的文件（比如HTML）。

方案二：强制HtmlWebpackPlugin每次构建都生成HTML #

另一个思路是让HTML文件在每次watch构建时都被重新生成，这样clean-webpack-plugin就不会把它当成“过期资源”了。

给HtmlWebpackPlugin添加force: true配置：

new HtmlWebpackPlugin({
  template: path.join(__dirname, 'src', 'popup.html'),
  filename: 'popup.html',
  chunks: ['popup'],
  // 强制每次构建都生成HTML文件，不管模板是否改动
  force: true
}),

这样哪怕你只修改了TS/CSS文件，Webpack每次增量构建都会重新输出HTML，自然不会被clean插件误删。

额外提示 #

如果你还想确保HTML模板文件本身的改动能触发watch构建，可以在webpack的watchOptions里明确监听HTML文件（不过默认Webpack会监听所有入口依赖的文件，你的配置里HtmlWebpackPlugin的模板已经被关联了，所以一般不需要额外配置）：

watchOptions: {
  ignored: /node_modules/,
  // 可选：配置监听的延迟和轮询（按需调整）
  aggregateTimeout: 300,
  poll: 1000
}

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