1、抽离webpack运行文件
[cc lang=”javascript” tab-size=”2″]
entry: {
first: ‘./src/first.js’,
second: ‘./src/second.js’,
vendor: Object.keys(packagejson.dependencies)//获取生产环境依赖的库
},
//先来抽离webpack运行文件，修改webpack配置文件：
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: [‘vendor’,’runtime’],
filename: ‘[name].js’
}),
]
[/cc]
其实上面这段代码，等价于下面这段：
[cc lang=”javascript” tab-size=”2″]
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
filename: ‘[name].js’
}),
new webpack.optimize.CommonsChunkPlugin({
name: ‘runtime’,
filename: ‘[name].js’,
chunks: [‘vendor’]
}),
]
[/cc]
上面两段抽离webpack运行文件代码的意思是创建一个名为runtime的commons chunk进行webpack运行文件的抽离，其中source chunks是vendor.js。
2、抽离第三方库和自定义公共模块
要在vendor.js中把第三方库单独抽离出来，上面也说到了有两种方法。
第一种方法minChunks设为Infinity，修改webpack配置文件如下：
[cc lang=”javascript” tab-size=”2″]
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: [‘vendor’,’runtime’],
filename: ‘[name].js’,
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name: ‘common’,
filename: ‘[name].js’,
chunks: [‘first’,’second’]//从first.js和second.js中抽取commons chunk
}),
]
[/cc]
这时候的vendor.js就纯白无瑕，只包含第三方库文件，common.js就是自定义的公共模块，runtime.js就是webpack的运行文件。
第二种方法把它们分离开来，就是利用minChunks作为函数的时候，说一下minChunks作为函数两个参数的含义：
module：当前chunk及其包含的模块
count：当前chunk及其包含的模块被引用的次数
minChunks作为函数会遍历每一个入口文件及其依赖的模块，返回一个布尔值，为true代表当前正在处理的文件（module.resource）合并到commons chunk中，为false则不合并。
[cc lang=”javascript” tab-size=”2″]
const config = {
entry: {
first: ‘./src/first.js’,
second: ‘./src/second.js’,
//vendor: Object.keys(packagejson.dependencies)//获取生产环境依赖的库
},
output: {
path: path.resolve(__dirname,’./dist’),
filename: ‘[name].js’
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
filename: ‘[name].js’,
minChunks: function (module,count) {
console.log(module.resource,`引用次数${count}`);
//”有正在处理文件” + “这个文件是 .js 后缀” + “这个文件是在 node_modules 中”
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(path.join(__dirname, ‘./node_modules’)) === 0
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: ‘runtime’,
filename: ‘[name].js’,
chunks: [‘vendor’]
}),
]
}
[/cc]
参考文章