webpack3及webpack4 提取公共代碼

webpack3中：

在這個項目中，webpack打包會包含三部分代碼 一、pageA，pageB中的業務邏輯代碼   二、webpack生成的代碼   三、第三方庫  如這裏的lodash代碼

這時候須要三個CommonsChunkPlugin來提取三次公共代碼，

第一個  name爲common，提取的是業務中重複代碼，minChunks表示產生提取的最小重複次數，chunks表示從哪些地方提取

第二個 name爲vendor，這裏必須和entry中一致，表示提取的公共第三方庫，minChunks設置infinity表示不判斷代碼重複次數

第三個 name爲mainfest，表示提取webpack生成代碼，minChunks設置無窮大，由於除了name  二三兩項提取設置一致，能夠合併爲同一項

除了第二項名字要和entry中保持一致，第一和第三項的名字能夠任意

const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: {
    pageA: "./src/pageA.js",   
    pageB: "./src/pageB.js",
    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,
      chunks:['pageA','pageB']
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names:['vendor','mainfest'],
      minChunks:Infinity
    }),
  ] 
};

運行後成功打包出第三方庫  vendor.bundle.js    業務中公共代碼common.bundle.js   webpack生成代碼     mainfest.bundle.js

在webpack4中配置

const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: {
    pageA: "./src/pageA.js",
    pageB: "./src/pageB.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        common: {
          name: "common",
          chunks: "all",
          minSize: 1,
          priority: 0
        },
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          priority: 10
        }
      },
    },
    runtimeChunk: {
      name: "manifest"
    }
  }
};

webpack4中新增了optimization配置，

splitChunks爲webpack自帶插件，這個名字就代表了插件的用途--分割代碼塊，

splitChunks.cacheGroups配置就是表示會提取到公共模塊的一個集合，也就是一個提取規則。priority指處理的優先級，這裏先處理第三方模塊，再處理業務公共代碼。

還有一個runtimeChunk也是webpack4新增，runtime就是運行環境，這裏就會打包出一個叫mainfest的webpack運行公共代碼，最後輸出以下圖