webpack4.0 抽取公共代码

这里对“公共代码”的解释是，再有多个入口时，抽离两个入口共有的依赖，将这些公共的部分单独打包
现在来模拟上述情况，新建a.js, b.js, other.js, index.js和other.js都引用a和b

//a.js
console.log("a~~~~~~~~~~~");
//b.js
console.log("b~~~~~~~~~~~");
//index.js, other.js（方便模拟，这俩个文件代码一样）
import "./a.js";
import "./b.js";
console.log("这是index.js"); // console.log("这是other.js");

打包：

1967135-9ecbec02a4970095.png

生成的index和other也分别把a和b打包在了各自体内，这样很浪费资源。webpack中的optimization字段中提供了splitChunks字段，就是为了抽离公共代码

// webpack.config.js
optimization: {
    minimizer: [
      ....
    ]
    splitChunks: {
      // 分割代码块（多页应用才会用到）
      cacheGroups: {
        //缓存组
        common: {
          // 公共的模块
          chunks: "initial", // 从开始处抽离，有多种配置，像异步模块什么的
          minSize: 0, // 最小大小
          minChunks: 2 //  引用次数
        }
      }
    }
  },

如果还要抽离第三方模块

optimization: {
    minimizer: [
      ...
    ]
    splitChunks: {
      // 分割代码块（多页应用才会用到）
      cacheGroups: {
        //缓存组
        common: {
          // 公共的模块
          chunks: "initial", // 从开始处抽离，有多种配置，像异步模块什么的
          minSize: 0, // 最小大小
          minChunks: 2 //  引用次数
        },
        vendor: {  // 此处为了抽离第三方的公共模块，比如jquery（前提是index和other都引入jquery了）
          priority: 1,  //权重， 如果不给这个字段，那么就此例来说，会先走上边的“common”，会把jquery和a.js，b.js合并在一个文件中。
                        //如果还有别的入口只使用jquery了，但是a和b对于它来说就是无用的。加上权重之后，会将第三方模块单独抽离
          test: /node_modules/,
          minSize: 0, // 最小大小
          chunks: "initial",
          minChunks: 2 //  引用次数
        }
      }
    }
  },

打包后：

1967135-ef2ede585e7b6dea.png