webpack中vender的抽離

一、單獨定義CommonsChunkPlugin，則會抽離全部入口文件中的公用模塊

new webpack.optimize.CommonsChunkPlugin({
      name: 'vender' // 指定公共 bundle 的名稱。
    })

    輸出結果會將全部通用文件單獨抽離到vender模塊

![](http://images2017.cnblogs.com/blog/1072235/201801/1072235-20180103154306737-1583112159.png)

二、在入口文件中定義vender，將可能使用到的通用模塊預約義到入口，並不使用CommonsChunkPlugin

entry: {
    index: './src/index.js',
    another: './src/another-module.js',
    common: ['jquery']
  }
    
    輸出結果只是生成預約義的模塊包，其餘入口文件之間通用的模塊並不會抽離出來，並不符合咱們的預期
    ![](http://images2017.cnblogs.com/blog/1072235/201801/1072235-20180103154701440-1921530676.png)

三、在入口文件定義vender，並同時使用CommonsChunkPlugin，而且定義的輸出模塊名是一致的

entry: {
    index: './src/index.js',
    another: './src/another-module.js',
    common: ['jquery']
  }

    new webpack.optimize.CommonsChunkPlugin({
      name: 'common' // 指定公共 bundle 的名稱。
    })

    輸出的結果會將lodash和jquery同時打包到common，比較合理並符合咱們的預期
    ![](http://images2017.cnblogs.com/blog/1072235/201801/1072235-20180103154953268-1186989397.png)

四、在入口文件中定義vender， 並同時使用CommonsChunkPlugin，而且定義的輸出模塊名字不一致

entry: {
    index: './src/index.js',
    another: './src/another-module.js',
    common: ['jquery']
  }

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vender' // 指定公共 bundle 的名稱。
    })

    ***輸出結果是，只有common將jquery打包輸出到最終結果，vender並未生效，並無抽離通用模塊，並不符合咱們的預期，common影響了vender的抽離，須要注意！***
    ![](http://images2017.cnblogs.com/blog/1072235/201801/1072235-20180103155337081-776147717.png)