代码分割: 可以将node_modules中代码单独打包一个chunk最终输出 自动分析多入口chunk中，有没有公共的文件 如果有会打包成单独一个chunk
optimization: {
splitChunks: {
chunks: 'all'
}
},
懒加载和预加载: webpackPrefetch预加载 正常加载可以认为是并行加载(统一时间再多个文件） 预加载 prefetch等其他资源加载完毕 浏览器空闲了 再去加载其他资源
import(/*webpackChunkName:'test',webpackPrefetch:true*/'./test').then((res)=>{ console.log(res) })
dll 使用dll技术，对某些第三方库进行单独打包 当运行webpack时 默认查找 webpack.config.js 配置文件
entry:入口起点
1.string -->'./src/index.js' 单入口 打包形成一个chunk，输出一个bundle文件 此时的chunk名称默认是main
2.array -->['./src/index.js','./src/add,js] 多入口 所有入口文件最终只会形成一个chunk 输出出去只有一个bundle文件
3.object 多入口 有几个入口文件就形成几个chunk 输出几个bundle文件 此时chunk的名称是 key
特殊用法:
所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件
index: ['./src/index.js', './src/count.js'],
形成一个chunk，输出一个bundle文件
add:'./src/add.js'
output:路径配置
output:路径配置
filename:'[name].js' 文件名称(指定名称+目录)
path:resolve(__dirname,'build') //输出的文件目录(将来所有资源输出的公共目录)
publicPath:'./' 所有输出资源的公共路径 ——-》路径的前面
chunkFilename:'[name]_chunk.js' 非入口cchunk名称 library:'[name]; 整个库向外暴露的变量名
libraryTarget:window 变量名添加到哪个属性上
module 插件配置
resolve 解析模块的规则
devServer 运行配置
optimization
将当前模块的记录其他模块的hash单独打包为一个文件 runtime
解决 修改a文件导致b文件的contenthash变化
runtimeChunk:{
name:entrypoint=>`runtime-${entrypoint.name}`
},
minimizer:[
//配置生产环境的压缩方案 js和css
new TerserWebpackPlugin({
cache:true 开启缓存
parallel：true 开启多进程打包
sourceMap:true 启用source-map
webpack5: 安装插件 npm i webpack@nextwebpack-cli-D
module.exports={mode:'development'}