webpack散记---提取公共代码

(1)作用：
减少代码冗余
提高加载速度
（2）来源
commonsChunkPlugin
webpack.optimize.CommonsChunkPlugin
（3）配置
{
    plugins:[
        new webpack.optimize.CommonsChunkPlugin(  option )
    ]
}
(4)options里的参数
options.name /options.names
options.filename   //公用文件的打包名
opyions.minChunks   //是数字的话：代表你提取公共代码的次数
options.chunks  //提取代码的范围
options.children
options.deepChildren
options.async  //创建异步的公共代码刘
（5）场景
      单页应用
      单页应用 + 第三方以来
      多页应用+ 第三方依赖 +webpack生成代码
 npm init npm install webpack --save-dev  //把webpack安装到本地   --因为chunk是webpack自带的

局部的webpack给项目的依赖做使用

（1）webpack.config.js
        var webpack = require('webpack')
        var path = require('path')

        module.exports = {
            entry:{
                'pageA ':'./src/pageA',
                'pageB':'./src/pageB'
              },

            output:{
                path:path.resolve(_dirname,'./dist'),
                filename:'[name].bundle.js',
                chunkFilename:'[name].chunk.js'
           },

           plugins:[
               new webpack.optimize.CommonsChunkPlugin({
                    name:'common',
                    minChunks:2
               })
           ]

        }
  
//想把lodash和vender打包在一起
module.exports = {
    entry:{
         'pageA':'./src/pageA',
         'pageB':'./src/pageB',
         'vender':['lodash']
     },
     output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'[name].bundle.js',
        chunkFilename:'[name].chunk.js'
     },
     plugins:[

         new webpack.optimize.CommizeChunkPlugin({
               name:'common',  //还是分开打包
               minChunks:Infinity， //2
               chunks:['pageA','pageB']
          }),

         new webpack.optimize.CommizeChunkPlugin({
               name:'vendor',  //把lodash和vender打包在一起
               minChunks:Infinity  //不需要任何重复
          }),

         new webpack.optimize.CommizeChunkPlugin({
               name:'mainifest',  //把lodash和vender打包在一起
               minChunks:Infinity  //不需要任何重复
          }),

          new webpack.optimize.CommizeChunkPlugin({
               names:['wendor','manifest'],  //把lodash和vender打包在一起
               minChunks:Infinity  //不需要任何重复
          })

     ]
}