解析
首先提取公共js代码块 是针对于多入口的项目配置
配置如下:
自定义的js代码块
name: 指定打包出来文件的名称
chunks:查找范围
minSize:1 打包文件的大小
minChunks: 指明模块被引用多少次为公共模块
priority:1 指明优先级 当有多个公共模块时候
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name][hash:3].bundle.js',
//将公共 js单独提取到该输出文件 其他模块将不再包含这里面的内容
chunkFilename: '[name][hash:3].js'
},
optimization: {
splitChunks: {
cacheGroups: {
common: {
chunks: 'all',
minSize: 1,
// minChunks: 2,
name: 'common',
priority: 2,
test: /\.js$/
}
}
},
},
对于引用第三方软件库时
配置如下
test 正则指明打包哪一个第三方库
两者区别:
首先tree-shaking来讲针对于某一个js文件A引用了B文件 B文件引用了C文件展示的是纵向引用
如同作用域链一样webpack自身的js-tree-shaing不具备作用域筛选功能 .如图A文件引用了a方法
npm run dev 模式下 不具备shaking功能
npm run prod 模式下 会打包出a 、c、d方法 不具备作用域筛选功能 加入要去除c、d深度tree-shaking
深度tree-shaking只是不会打包涉及作用域之外的代码