解决webpack html 不能自动刷新的问题

很久之前出于项目需要，做了一个多页面的webpack3配置，遇到在dev-server开发时html不能修改自动更新的问题，多方查找后勉强找到了一个折中的方法，不美观算但是能凑合着用，这段时间看webpack4页稳定了而且据说都快出5就寻思着要是不赶紧弄一个的话真的对不起自己切图仔的身份，于是… 发现webpack4依然不能使用官方的方法实现这个功能，不过勉强算是找到了不用入侵生产代码的方法，在这里将他们都记录一下。

首先放一下webpack4的多页面配置webpack-v4-conf ,欢迎start??~

解决方式1

首先说下之前在webpack3中的解决方案：

首先需要知道html不能自动更新是因为html-webpack-plugin只是为我们生成html页面，并没有把我们的html页面放到webpack的依赖图里，所以，只要我们把当前页面推到依赖图中就能解决这个问题。

方法很简单，首先配置好对应的loader（因为我使用pug，所以需要配置pug-loader, 如果使用html的话则配置html-loader, 不要使用raw-loader，那会默认的ejs模板语法失效），然后将在主文件中将当前页面作为依赖引入即可,

webpack.config.js

      {
   
        test: /\.pug$/,
        use: [
          'pug-loader'
        ]
      },

main.js

if (process.env.NODE_ENV !== 'production') {
   	// 这样在生产模式时这段代码就会被shake调了
  function pageName