webpack自我提升 - 优化篇(1)
1、HMR = hot module replacement ( 热模块替换/模块热替换 )
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度
devServer:{
... ,
hot:true,//开启HMR功能
}
注意：
1、样式文件：可以使用HMR（因为style-loader依赖内部实现了热替换，生产则需提取成单独文件）
2、HTML文件: 默认不使用HMR功能，但devServer中配置了hot:true,会导致html文件不能热更新
要开启html文件的解决方案：
原entry : "./src/index.js"
现entry : ["./src/index.js","./src/index.html"]
而且项目一般就一个html文件，故不用做html功能，解决上述bug即可
3、js文件：默认不使用HMR，同时HMR只对非入口js文件配置
若开启配置如下：
引入目标的js文件配置：
if（module.hot）{ //为true说明开启HMR功能
module.hot.accept("./xxx.js",function(){
可以调用xxx.js的函数 //xxx.文件的函数
})
}
accept方法会监听xxx.js文件的变化，一旦发生变化，其他模块不会重新打包构建
会执行后面的回调函数
多个非入口文件的话要逐个配置
2、source-map 源代码报错
使用方法：
module.exports = {
... ,
devtool:"source-map"
}
source-map > cheap-module-source-map > eval-source-map(react就是用的这个)
3、optimization 分割chunk文件
const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
optimization:{
splitChunks:{
chunks:"all",
minSize: 30 * 1024, //分割的chunk最小为30kb
maxSize: 0 , //最大限制
minChunks: 1 , //要提取的chunk最小被引用1次
maxAsyncRequests: 5 , //按需加载时并行加载文件的最大数量
maxInitialRequests: 3 , //入口js文件最大并行请求数量
automaticNameDelimiter: "~" , //名称连接符
name:true, //可以使用命名规则
cacheGroups:{ //分割chunks的数组
vendors:{
test:/[\\/]node_module[\\/]/,
priority: -10 , //优先级
}，
default:{
minchunks: 2 , //要提取的chunk最小被引用2次
priority: -20 , //优先级
reuseExistingChunk: true , //如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
}，
runtimeChunk:{
name: entrypoint => `runtime-${entrypoint.name}`
}, //将当前模块记录其他模块的hash单独打包为一个文件； 修改a文件导致b文件的contenthash变化
minimizer:[ //配置生产环境的压缩方案： js 和 css
new TerserWebpackPlugin({
cache:true, //开启缓存
parallel:true, //开启多线程打包
sourceMap:true, //启动source-map
})
]
}
}
}
}
4、oneOf
作用：相同文件配置智能生效一个
注意：不能有两个配置处理同一个文件，若有则需要提取到oneOf外，配合enforce："pre"使用
例如：js配置处理有eslint-loader 和 babel-loader就需要把eslint-loader的单独提取出来；
5、缓存
（HMR是基于devServer的，生产环境无法使用)
1、babel缓存（让第二次打包构建速度更快）
在options中配置：cacheDirectory : true 开启
第二次构建时，会读取之前的缓存
但要配合打包出去的js和css命令
实例：
module.exports = {
... ,
output:{
... ,
filename:"built.[contenthash:10].js"
},
module:{
rules:[
... ,
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_module/,
options:{
... ,
cacheDirectory:true
}
}
]
},
plugins:[
... ,
new MiniCssExtractPlugin({
filename:"css/built.[contenthash:10].css"
})
]
}
2、文件资源缓存（让代码上线运行缓存更好使用）
contenthash : 根据文件的内容生成hash值，不同文件的hash值不一样（修改内容，文件hash值改变，更新缓存）
hash : 每次webpack构建时都会生成一个唯一的hash值（改一个文件，等于重新打包，缓存失效，更新所有缓存）
chunkhash : 根据chunk生成的hash值，如果打包来源于同一个chunk（例如：一个js引入一个css,）那么hash值就一样，
例如：修改css文件，打包出的文件hash值还是一样，无法更新缓存，修改内容hash值还是没有改变（因为css还是在js中被引入，所以同属于一个chunk）
