webpack配置devserve了但是修改html文件无法更新

  entry:path.resolve(__dirname,'src/index.js'),
  output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[contenthash].js'
  },

  devServer:{  //实时重新加载
        host:"localhost",
        port:"8081",
        contentBase:"./dist",  //告诉从什么位置查找文件
        compress:true,  //启动gzip压缩
        open:true,  //自动打开浏览器
        hot:true,  //热更新
  }

网上搜索得知： 只监听webpack.config.js中的entry入口的文件（js、css）,对于不在entry中的html不监听与刷新页面

 

解决方法：

　　1.配置loader + 判断当前环境引入html到entry的js文件中    https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload

　　2.搭建一个静态服务  https://www.npmjs.com/package/livereload 或者 https://github.com/mklabs/tiny-lr

验证了一下方法1：可以，但是发现了一个问题

 new webpack.optimize.UglifyJsPlugin({  // 压缩 js
      compressor: {
           warnings: false,
      },
 }),
报错webpack.optimize.UglifyJsPlugin is not a constructor，

内置的JS压缩插件不能使用了，可以使用uglifyjs-webpack-plugin，

 //添加到此处
    ,optimization: {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: false,
            }
          })
        ]
    }

webpack@4以后的版本，弃用了许多@3的插件，其中包括：
分离打包js文件的插件 webpack.optimize.CommonChunkPlugin()；
压缩js文件的插件 webpack.optimize.UglifyJsPlugin();
定义产品上线环境webpack.optimize.DedupePlugun()；
分离css文件插件extract-text-webpack-plugin();
css文件压缩插件 CssMinimizerPlugin()

能都并入entry和output的配置中，分离打包默认不会实现