webpack系类之抽离公共模块实例讲解

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,单页面的话是无法抽离公共模块的，可以通过按需加载来优化单页面