The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）
Posted Westbrook维
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）相关的知识，希望对你有一定的参考价值。
学习之路基于webpack3.10.0，webpack4.0之后更新。
多页面提取公共代码！！！
一：文件关系
pageA --> subA、subB --> moduleA
pageB --> subA、subB --> moduleA
那么pageA、pageB 的公共代码就是subA、subB 、moduleA。
二：webpack.config.js文件配置
var webpack = require(‘webpack‘)
var path = require(‘path‘);
module.exports = {
entry:{
"pageA":‘./src/pageA.js‘,
"pageB":‘./src/pageB.js‘,
‘vendor‘:[‘lodash‘]//第三方插件
},
output:{
path:path.resolve(__dirname,‘./dist‘),
filename:‘[name].bundle.js‘,
chunkFilename:‘[name].chunk.js‘
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({//打包业务逻辑上面的公共代码
name:‘common‘,
minChunks:2,
chunks:[‘pageA‘,‘pageB‘]
}),
new webpack.optimize.CommonsChunkPlugin({//打包第三方插件lodash的代码
name:‘vendor‘,
minChunks:Infinity
}),
new webpack.optimize.CommonsChunkPlugin({//打包webpack代码
name:‘manifest‘,
minChunks:Infinity
})
]
}
打包公共代码只适合多页面应用。
三：webpack4中的打包公共代码
webpack4已经移除了commonchunkPlugin，直接在配置里面写即可。
const webpack = require("webpack");
const path = require("path");
module.exports = {
mode:‘development‘,
// 多页面应用
entry: {
pageA: "./src/pageA.js",
pageB: "./src/pageB.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
optimization: {
splitChunks: {
cacheGroups: {
// 注意: priority属性
// 其次: 打包业务中公共代码
common: {
name: "common",
chunks: "all",
minSize: 1,
priority: 0//优先级
},
// 首先: 打包node_modules中的文件
vendor: {
name: "vendor",
test: /[\/]node_modules[\/]/,
chunks: "all",
priority: 10
}
}
}
}
};
以上是关于The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）的主要内容，如果未能解决你的问题，请参考以下文章
The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）
The way of Webpack learning (V.) -- css和js的tree shaking
The way of Webpack learning (III.) -- codeSplitting & lazyLoding（代码分割和路由懒加载）