Webpack dev server热更新对JS生效 但HTML修改不触发如何解决

Webpack 原生的热模块替换（HMR）仅针对被纳入模块依赖树的资源生效，你当前配置中.html文件仅作为HtmlWebpackPlugin的模板加载，没有被加入Webpack的编译依赖树，因此修改后无法触发更新逻辑。

两种方案选其一即可，优先推荐第一种：

方案1：配置devServer监听规则（无需修改业务代码） #

webpack-dev-server v4+ 提供了watchFiles配置项，可直接指定需要额外监听的文件，同时开启liveReload实现html修改后自动刷新页面（html属于页面根模板，变更无法做到无刷新替换，需要整页重载，js文件的热更新不受影响）。
修改你的webpack.config.js中devServer字段如下：

devServer: {
    port: 9000,
    compress: true,
    open: true,
    hot: true,
    liveReload: true, // 开启自动刷新
    watchFiles: [
        // 监听src目录下所有html文件的变化
        path.resolve(__dirname, 'src/**/*.html')
    ]
},

修改后重启devServer即可生效。

方案2：将html引入模块依赖树 #

在你的入口文件src/index.js中新增一行引入html的代码：

import './index.html'

这样html会被html-loader处理并加入依赖树，修改后会自动触发页面刷新。该方案需要侵入业务代码，适合多html入口的复杂场景。

修改src/index.html内容后保存，页面会自动重载展示更新后的内容，修改js文件依然保持无刷新热更新。

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