官网链接 —->

老版webpack中集成的plugin为 CommonsChunkPlugin ,但是在webpack4b版本就废弃了，从webpack v4开始，CommonsChunkPlugin删除了，而改为optimization.splitChunks。
image.png

  1. module.exports = {
  2.     optimization: {
  3.         splitChunks: {
  4.             cacheGroups: {
  5.                 vendor: {
  6.                     name: "vendor",
  7.                     test: /[\\/]node_modules[\\/]/,
  8.                     chunks: "all",
  9.                     priority: 10 // 优先级
  10.                 },
  11.                 common: {
  12.                     name: "common",
  13.                     test: /[\\/]src[\\/]/,
  14.                     minSize: 1024,
  15.                     chunks: "all",
  16.                     priority: 5
  17.                 }
  18.             }
  19.         }
  20.     },
  21. };

这里我配置了两个缓存组，即 vendor 和 common

  • vendor: 抽取来自 node_modules 文件夹下的第三方代码，优先级权重为10
  • common: 抽取来自 src 文件夹下的代码，优先级权重为5

  • vendor比common的优先级权重高，所以先提取 vendor，再提取 common

  • 在入口文件引用的第三方文件（这里我用了lodash来测试）被打包到 vendor.js

  • 在入口文件引用到的公共文件（这里我用了自己写的util.js）被打包到common.js

注意

这里还需要注意的是，公共引用的css文件，本来我是用了extract-text-webpack-plugin插件抽取到单独的文件，因为css文件也有公共引用，所以也被 SplitChunksPlugin 插件抽取成公共模块打包到了common.css文件_