HMR(模块热替换)
模块热替换(Hot Module Replacement 即 HMR)是 webpack 提供的最有用的功能之一, 它允许在运行时更新各种模块, 而无需进行完全刷新。
启用这个功能,只需要修改一下 webpack.config.js 的配置, 使用 webpack 内置的 HMR 插件就可以了, 在devServer中使用hot参数(只能监测到js的热替换,html不可以)
devServer: {
contentBase: resolve(__dirname, "build"),
//启动gzip压缩
compress: true,
//设置服务器端口号
port: 3000,
//自动打开浏览器
open: true,
hot: true
}
启用 webpack 内置的 HMR插件后, module.hot 接口就会暴露在 index.js 中, 接下来需要在 index.js 中配置告诉 webpack 接受HMR的模块。
-
样式HMR功能,在开发环境中使用style-loader
-
HTML的HMR功能,默认也没有HMR功能(不用做HMR功能),需要在entry入口中引入html文件。
entry: ['./src/js/index.js','./src/index.html']
这样index.html 一有变化,webpack也能自动刷新网页 -
js的HMR功能,默认没有HMR功能,只能处理非入口文件的js文件。
启用 webpack 内置的 HMR插件后, module.hot 接口就会暴露在 index.js 中, 接下来需要在 index.js 中配置告诉 webpack 接受HMR的模块
index.js添加
if (module.hot) {
//只监听这个文件的变化
module.hot.accept('./print.js', function() { //告诉 webpack 接受热替换的模块
console.log('Accepting the updated printMe module!');
printMe();
})
}
//服务器检测到了 print.js 的代码变化并且执行了 module.hot.accept 的回调函数