webpack4.x热更新，自动刷新

模块热替换(Hot Module Replacement)

模块热替换功能会在应用程序运行过程中替换、添加或删除模块，无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

• 保留在完全重新加载页面时丢失的应用程序状态。
• 只更新变更内容，以节省宝贵的开发时间。
• 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

webpack-dev-server实现热更新(HMR)

webpack-dev-server就是一个基于node.js和webpack的小型服务器。

热更新可以做到在不刷新浏览器的前提下更新页面。

安装webpack-dev-server

npm install webpack-dev-server --g
npm install webpack-dev-serve --save-dev

配置webpack.config.js文件

const webpack=require('webpack');//引入webpack
    entry:__dirname+'/src/main.js',
    output:{
        publicPath:'/dist',//必须加publicPath
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    devServer:{
        host:'localhost',
        port:'8080',
        open:true//自动拉起浏览器
        hot:true,//热加载
        //hotOnly:true
    },
    plugins:[
    //热更新插件
        new webpack.HotModuleReplacementPlugin()
    ]

但是通过日志发现页面先热更新然后又自动刷新，这和自动刷新是一样的。
如果只需要触发HMR，可以再加个参数hotOnly:true,这时候只有热更新，禁用了自动刷新功能。
如果需要自动刷新就不需要设置热更新。

热跟新必须有以下5点：
1.引入webpack
2.output里加publicPath
3.devServer中增加hot:true
4.devServer中增加hotOnly:true
5.在plugins中配置 new webpack.HotModuleReplacementPlugin()