一、 场景
开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。
所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快
这个就需要在webpack.config.js
中配置一下hmr
热模块替换
二、什么是HotModuleReplacement
HotModuleReplacement
(简称HMR)是Webpack
提供的一个功能,它可以在不刷新页面的情况下,实现局部模块的热更新。也就是说,当你修改了一个模块的代码后,HMR
会自动将修改的部分更新到浏览器中,而不会重新加载整个页面。
HMR
的实现原理是通过WebSocket
连接服务器,实时监听文件变化,然后动态更新模块。对于一些纯数据的模块,Webpack
会使用热替换(Hot Replacement)
技术,替换旧模块。
使用HMR
可以提高开发效率和调试体验。在开发过程中,只需修改特定的代码,即可实时保存并查看修改结果,无需手动刷新浏览器。同时,HMR
也避免了页面重新加载,减少了开发时间和流量消耗。
三、配置使用
在开发环境下将devServe
r的hot
配置成true
就行了
module.exports = {
// 其他省略
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
hot: true, // 开启HMR功能(只能用于开发环境,生产环境不需要了)
},
};
此时 css 样式经过 style-loader 处理,已经具备 HMR 功能了。 但是 js 还不行。文章来源:https://www.toymoban.com/news/detail-486669.html
js需要到main.js中配置,如下:文章来源地址https://www.toymoban.com/news/detail-486669.html
if (module.hot) {
module.hot.accept('./library.js', function() {
// 对更新过的 library 模块做些事情...
});
}
// or
if (import.meta.webpackHot) {
import.meta.webpackHot.accept('./library.js', function () {
// Do something with the updated library module…
});
}
到了这里,关于webpack提升打包构建速度(hmr/热模块替换)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!