webpack4知识整理（七） 代码抽离

• 这里对optimization中的代码抽离配置进行简单说明

• 首先看一下配置条件，有多个入口文件，入口文件分别对公共的JS文件进行调用，为了避免重复打包，还可以作为缓存文件来优化

• 在src目录下index.js和other.js文件分别对util1.js和util2.js进行引用，所以util1和util2可以被单独的抽离出来

• 

• 接下来对webpack的optimization属性进行配置

let path = require('path')
let CleanWebpackPlugin = require('clean-webpack-plugin')module.exports ={mode:'development',entry:{index:'./src/index.js',other:'./src/other.js'},output:{filename:'[name].js',path:path.resolve(__dirname,'dist')},... ...optimization:{splitChunks:{cacheGroups:{common:{chunks:'initial',minSize:0,minChunks:2}}}}
}

1. minSize是用来设置公共代码的最小字节，超过这个数值就会被抽离

2. minChunks是用来设置被引用多少次才进行抽离

• 如果多个文件同时引用第三方依赖库，需要单独抽离出第三方依赖库需要在optimization做一下配置

optimization:{splitChunks:{cacheGroups:{common:{chunks:'initial',minSize:0,minChunks:2},vendor:{priority:1,test:/node_modules/,chunks: 'initial',minSize: 0,minChunks: 2}}}}

1. vendor属性配置就是对第三方依赖的单独抽离配置
2. priority用来配置处理的优先级，这里如果不配置，将会和不是第三方依赖的文件打包在一起
3. test是表示依赖的文件来自于哪里

• vendor文件就是第三方依赖的抽离文件