开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
前言
这一篇主要写了webpack提升打包构建速度的HotModuleReplacement和oneOf提升打包构建速度。
热模块替换(HotModuleReplacement)
开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。
HotModuleReplacement (HMR/热模块替换) 的作用就是在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。
使用
热替换只能用于开发环境，生产环境是不需要的，且开发环境中hot配置默认是开启的。
// webpack.dev.js
......
devServer: {
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
oneOf
在运行打包代码时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要走，如果loader和文件很多,那就会大大拖慢打包文件的速度，那么就可以使用oneOf,也就是只能匹配上一个 loader, 只要匹配到了剩下的就不匹配了。
使用
我们只需要在生产环境和开发环境的配置中将所有的规则像下面这样包起来就可以了：
rules:[
{
oneOf:[
将原本卸载rules:[]的规则放进来！
]
}
]
完成上面的操作之后分别在开发模式和生产模式进行一次代码的打包，测试一下打包是否可以成功，成功则说明配置是正确的,虽然能优化的速度有限，但蚊子再小也是肉也是不错的！
小结
以更文促进学，持续不断进步,加油！
