webpack代碼提取公共部分。

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:'vendor', // name是提取公共代碼塊後js文件的名字。

       minChunks:Infinity //這裏是把js代碼和插件代碼打包在一塊兒了，由於兩個js都要用，而後打包後的文件有lodash，還有那三個引用js

 }),

new webpack.optimize.CommonsChunkPlugin({

        name:'manifest', minChunks:Infinity //這是是爲了把webpack的代碼和插件的代碼區分開 })

]

}

這是添加了vender的，沒加以前是有pageA,和pageB，而後引入subpagea，和subpageb，nodule。而後生成了個common.bundle.js裏面就有了
代碼的重複塊，提取出了代碼重複快。subpagea，和subpageb，noduleminChunks:2就是配置的重複代碼的提取。後面又添加一個插件，可是打包之後代碼混在了一塊兒

new webpack.optimize.CommonsChunkPlugin({
        name:'common',
        minChunks:2//這是最開始兩個js文件提取公共代碼的配置，後面改了改爲了第三方插件代碼的和js文件的提取公共代碼，可是太碼放，想給兩個代碼分開。
    })

 隨便說下邏輯最開始有

'pageA':'./src/pageA',
'pageB':'./src/pageB',
最開始只有這兩個js，可是這兩個js都引入了subpageb，subpageA,module.而後執行上面那個代碼 name:'common',minChunks:2就能夠打包了。生成了common.bundle的打包文件，裏面
就有subpageb，subpageA,module後面又增長了個插件代碼，配置name:'vendor', // minChunks:Infinity而後就打包好了個包含插件和公共代碼
的js文件，可是插件太大。不太好，處理一下。就有了name:'manifest',name:'manifest',就是分離公共代碼和插件代碼，下來再看看詳情。name是提取公共代碼塊後js文件的名字。

 第一次只打包pagea和pageb公共部分，而後new webpack.optimize.CommonsChunkPlugin，

提取個common.bundle.js出來。這麼作是由於，兩個js都要引用相同的東西，給她提取出來，不是的話，打包下來兩個包都有這個js會變大。

這裏單獨把插件代碼打出來，可是有個問題，這個插件代碼包括了pageA,pageB.爲了有所區分。

 

在寫一個代碼讓他重新獨立出來。

這時生成四個js A,B和獨立出來的插件代碼，還有相對於vendor，裏面的webpack代碼。只有些jsonp方法。

manifest這個文件感受不過重要，在分離一遍的意義不知道在哪。
還有個很直接的問題如今A,B的公共代碼並無提取出來。

在添加個這個函數就行了。

如今基本就打包好了，給A,B打包出來，而後給他們之間的共同引用打包出來，common.js

而後給公共的插件代碼打包出來vendor，最後那個是webpack相對於插件的打印出來。