webpack3及webpack4 提取公共代码

webpack3中：

在这个项目中，webpack打包会包含三部分代码 1、pageA，pageB中的业务逻辑代码   2、webpack生成的代码   3、第三方库  如这里的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运行公共代码，最后输出如下图