optimization:{
splitChunks:{
chunks:"all",
//默认值，可以不写
/*
minSize: 30*1024,//chunk大于30kb才会进行分割
maxSize:0,//最大没有限制
minChunks:1,//要提取的chunks最少被引用1次
maxAsyncRequests:5,//按需加载时并行加载文件的最大数
maxInitialRequests:3,//入口js文件并行最大请求数量
automaticNameDelimiter:'~',//名称连接符
name:true,//可以使用命名规则
cacheGroups:{//分割chunk的组
//node_modules会被打包到vendors组的chunk中 命名规则是 vendors~xxx.js
//满足上面的公共规则，大小超过30kb，至少被引用一次
vendors:{
test:/[\\/]node_modules[\\/]/,
//优先级为-10
priority:-10,
},
//默认组是default
default:{
//要提取的chunks最少被引用2次
minChunks:2,
//优先级
priority:-20,
//如果当前要打包的模块，和之前已经被提取的模块是1个，就会复用
reuseExistingChunk:true,
}
}
*/
}
},
import引入js，通过代码分割后，如果引入的add.js改变，index.js也会重新打包的问题处理
output:{
filename:'js/[name].[contenthash:10].js',
path:resolve(__dirname,'dest'),
//对import引入的文件做名字处理，增加contenthash
chunkFilename:'js/[name].[contenthash:10]_chunk.js'
},
index.js中进行chunk命名
import (/*webpackChunkName:'add'*/'./add.js').then(()=>{
})
只要add.js改变，index.js就会重新打包，因为index.js中有add的名字保存了hash值。所以缓存失效
要将hash值单独进行打包
配置在optimization中，与splitChunks并列
//将当前模块记录其他模块的hash单独打包到一个文件runtime
//打包后，会生成runtime文件
//如果更改add.js文件，新生成的文件为add.js 和 runtime文件，index.js没变
runtimeChunk:{
name:entrypoint=>`runtime-${entrypoint.name}`
}
另外启动压缩
runtimeChunk:{
name:entrypoint=>`runtime-${entrypoint.name}`
},
//配置生产环境的压缩方案： js 和css
minimizer:(
//想让压缩变得更好，可以更改配置。使用默认配置也可以
new TerserWebpackPlugin({
//开启缓存
cache:true,
//开启多进程打包
parallel:true,
//启用sourceMap，否则会被压缩掉
sourceMap:true,
})
)
