模块热替换(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()