网站 托管,保定建站模板搭建,政务网站队伍建设情况,清河网站建设价格前言 之前更新过一篇Webpack文章:Webpack入门只看这一篇就够了(图文代码)#xff0c;没想到颇受好评#xff0c;很快就阅读量就破万了hhh#xff0c;应读者私信的要求#xff0c;决定继续更新Webpack进阶系列的文章#xff01;
进入今天的主题 —— HMR
热模块替换(HotM…前言 之前更新过一篇Webpack文章:Webpack入门只看这一篇就够了(图文代码)没想到颇受好评很快就阅读量就破万了hhh应读者私信的要求决定继续更新Webpack进阶系列的文章
进入今天的主题 —— HMR
热模块替换(HotModuleReplacement) 开发时我们修改了其中一个模块代码Webpack 默认会将所有模块全部重新打包编译速度很慢。所以我们需要做到修改某个模块代码就只有这个模块代码需要重新打包编译其他模块不变这样打包速度就能很快。
HotModuleReplacement (HMR/热模块替换) 的作用就是在程序运行中替换、添加或删除模块而 无需重新加载整个页面。
使用场景 如上图所示一个注册页面包含用户名、密码、邮箱三个必填输入框以及一个提交按钮当你在调试邮箱模块改动了代码时没做任何处理情况下是会刷新整个页面频繁的改动代码会浪费你大量时间去重新填写内容。预期是保留用户名、密码的输入内容而只替换邮箱这一模块。这一诉求就需要借助webpack-dev-server的热模块更新功能。
相对于live reload整体刷新页面的方案HMR的优点在于可以保存应用的状态提高开发效率。
代码实操 热替换只能用于开发环境生产环境是不需要的且开发环境中hot配置默认是开启的。
// webpack.dev.jsdevServer: {host: localhost, // 启动服务器域名port: 3000, // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 开启HMR功能},在hot:true的情况下运行开发环境如下更改css的时候可以看到页面并没有刷新而只是对更改的css进行了解析,因为我们在开发模式下使用的style-loader实现了这一功能这就是热模块替换 虽然css实现了热模块替换但JS还没有实现更改JS文件进行保存还是会刷新页面重新打包编译,JS实现热模块替换还需要进行下面的操作:
// src/main.js
// 判断是否支持HMR功能
if (module.hot) { module.hot.accept(./js/count.js);
}加上这个count.js改变之后就会进行热模块替换如果其他文件也需要进行热模块替换也是需要加上module.hot.accept();进行设置。
module.hot.accept(./js/count.js,function(){});还可以接收一个函数这个函数就是当触发热替换的时候就会自动调用这个函数。
当然如果文件很多的话会很麻烦,在实际开发中会使用其他的loader来解决这个问题比如vue-loader
原理 如上图所示右侧Server端使用webpack-dev-server去启动本地服务内部实现主要使用了webpack、express、websocket。 使用express启动本地服务当浏览器访问资源时对此做响应。 服务端和客户端使用websocket实现长连接 webpack监听源文件的变化即当开发者保存文件时触发webpack的重新编译。 每次编译都会生成hash值、已改动模块的json文件、已改动模块代码的js文件编译完成后通过socket向客户端推送当前编译的hash戳 客户端的websocket监听到有文件改动推送过来的hash戳会和上一次对比一致则走缓存不一致则通过ajax和jsonp向服务端获取最新资源 使用内存文件系统去替换有修改的内容实现局部刷新
oneOf 在运行打包代码时每个文件都会经过所有loader处理虽然因为test正则原因实际没有处理上但是都要走如果loader和文件很多,那就会大大拖慢打包文件的速度那么就可以使用oneOf,也就是只能匹配上一个 loader, 只要匹配到了剩下的就不匹配了。
使用: 我们只需要在生产环境和开发环境的配置中将所有的规则像下面这样包起来就可以了
rules:[{oneOf:[将原本卸载rules:[]的规则放进来]}
]完成上面的操作之后分别在开发模式和生产模式进行一次代码的打包测试一下打包是否可以成功成功则说明配置是正确的,虽然能优化的速度有限但蚊子再小也是肉也是不错的
