1.在项目里安装局部 webpack
npm install webpack@3.10.0 --save-dev
webpack.config.js:
var webpack=require('webpack')
var path=require('path')
module.exports={
entry:{
'pageA':'./src/pageA',
'pageB':'./src/pageB',
'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,
//minChunks表示出现几次要抽离出来,Infinity表示无论几次都抽离
chunks:['pageA','pageB']
//chunks表示要抽离的公共代码的范围
}),
new webpack.optimize.CommonsChunkPlugin({
name:'vendor ',
minChunks:Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name:'mainfest',
minChunks:Infinity
})
]
}
抽离公共代码的前提是项目要有多个entry,单页面的话是无法抽离公共模块的,可以通过按需加载来优化单页面