Webpack 的 CommonsChunkPlugin 插件，負(fù)責(zé)將多次被使用的 JS 模塊打包在一起。

CommonsChunkPlugin 能解決的問題

在使用插件前，考慮幾個(gè)問題：

對(duì)哪些 chunk 進(jìn)行提取，這決定了 chunks ，children 和 name 要怎么配置 common chunk 是否異步，這決定了 async 怎么配置 common chunk 的粒度，這決定了 minChunks 和 minSize 怎么配置

以下是官方給出的常用的場(chǎng)景：

提取兩個(gè)及兩個(gè)以上 Chunk 的公共代碼 將 Code Split 切割出來的 Chunk「就是子 Chunk」，提取到父 Chunk 將 Code Split 切割出來的 Chunk，提取到一個(gè)新的異步加載的 Chunk 提取某個(gè)類似 jquery 或 react 的代碼庫(kù)

前面我們實(shí)現(xiàn)了 多頁面分離資源引用,按需引用JS和css

但有一個(gè)問題：最后生成的3個(gè)js，都有重復(fù)代碼，我們應(yīng)該把這部分公共代碼單獨(dú)提取出來。

方式一，傳入字符串參數(shù)

new webpack.optimize.CommonsChunkPlugin(‘common.js'), // 默認(rèn)會(huì)把所有入口節(jié)點(diǎn)的公共代碼提取出來,生成一個(gè)common.js

var HtmlWebpackPlugin = require('html-webpack-plugin');var webpack = require('webpack');var extractTextPlugin = require('extract-text-webpack-plugin');module.exports = {  // entry是入口文件，可以多個(gè)，代表要編譯那些js  //entry:['./src/main.js','./src/login.js','./src/reg.js'],  entry:  {    'main':'./src/main.js',    'user':['./src/login.js','./src/reg.js'],    'index':['./src/index.js']  },  externals:{    'jquery':'jQuery'  },  module:{    loaders:[      // {test://.css$/,loader:'style-loader!css-loader'},      {test://.css$/,loader:extractTextPlugin.extract('style','css')}    ],  },  output:{    path: __dirname+'/build/js', // 輸出到那個(gè)目錄下（__dirname當(dāng)前項(xiàng)目目錄）    filename:'[name].js' //最終打包生產(chǎn)的文件名  },  plugins:[    new HtmlWebpackPlugin({      filename: __dirname+'/build/html/login-build.html',      template:__dirname+'/src/tpl/login.html',      inject:'body',      hash:true,      chunks:['main','user','common.js']  // 這個(gè)模板對(duì)應(yīng)上面那個(gè)節(jié)點(diǎn)    }),    new HtmlWebpackPlugin({      filename: __dirname+'/build/html/index-build.html',      template:__dirname+'/src/tpl/index.html',      inject:'body',      hash:true,      chunks:['index','common.js']  // 這個(gè)模板對(duì)應(yīng)上面那個(gè)節(jié)點(diǎn)    }),    // css抽取    new extractTextPlugin("[name].css"),    // 提供公共代碼    new webpack.optimize.CommonsChunkPlugin('common.js'), // 默認(rèn)會(huì)把所有入口節(jié)點(diǎn)的公共代碼提取出來,生成一個(gè)common.js  ]};

方式二，有選擇的提取公共代碼

// 提供公共代碼// 默認(rèn)會(huì)把所有入口節(jié)點(diǎn)的公共代碼提取出來,生成一個(gè)common.js// 只提取main節(jié)點(diǎn)和index節(jié)點(diǎn)new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),