webpack配置html热更新问题

1.为什么webpack不会对html进行热更新？
因为webpack需要监听文件的变化才能进行相应的更新。而监听文件是从webpack配置的入口出发，从而对各个依赖进行更新。而入口的js文件一般不会引入html文件作为依赖，所以不会对html文件进行监听，也就不会对html文件进行热更新。
2.解决方法
由上可知，要使html热更新有以下两种方法：
1）将html文件放到入口文件数组中，如下：

const { resolve } = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',
    //将html加入到入口中是为了html可以热更新
    /*注意：两者之间的位置不能交换，因为插件webpack-dev-server的作用是
    将所有webpack生成的bundles引入html中,即通过<script>
    标签引入生成的built.js所以必须先生成built.js，又webpack
    执行的时候是从后往前执行，所以.js需要放在后面*/
    entry: ['./src/index.html','./src/index.js'],
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    
    devServer: {
        host: 'localhost',
        port: '3000',
        static: {
            directory: resolve(__dirname, 'dist')
        },
        open: true,
        compress: true
    }
}

2).再’./src/index.html’引入html文件作为依赖

//两个文件在同一目录下
import './index.html'