如果一个较大的项目，把打包结果放在一个文件中，文件会比较大，这时可以拆分到多个文件。代码拆分需要指定输出名称。

多入口文件拆分

  1. entry: {
  2.   // 方式一：会输出到两个文件，第三方包的代码会包含在里面
  3.     main1: './src/main1.js',
  4.     main2: './src/main2.js'
  5.   // 方式二：会输出到两个文件和一个第三方包的文件
  6.     // main1: { import: './src/main1.js', dependOn: 'shared' },
  7.     // main2: { import: './src/main2.js', dependOn: 'shared' },
  8.     // shared: ['lodash', 'jquery']
  9.   },
  10.   output: {
  11.     filename: 'js/[name].build.js',
  12.     path: resolveApp('./dist')
  13.   },
  15.   optimization: {
  16.     minimizer: [
  17.       new TerserPlugin({
  18.         extractComments: false,
  19.       }), // 压缩JS
  20.     ],
  21.   },

单入口文件

  1. entry:  './src/index.js',
  2. output: {
  3.     filename: 'js/[name].build.js',
  4.     path: resolveApp('./dist')
  5.   },
  6.   optimization: {
  7.     minimizer: [
  8.       new TerserPlugin({
  9.         extractComments: false,
  10.       }),
  11.     ],
  12.     splitChunks: {
  13.       chunks: 'all'
  14.     } // 提取所有第三方包到单独的文件
  15.   },

splitchunks 配置

chunks：默认值是 ‘async’ ，即把异步导入的包提取出来，’initial’ 把同步导入的包提取出来，’all’ 把所有导入的包提取出来。
minSize：默认值是20000，如果导入的第三方提取出来的文件大小小于该值，则不会进行拆包。
maxSize：默认值是0，导入的第三方包拆分出来的文件大小不能小于该值。如果设置了minSize，那么该值最小要等于minSize。
minChunks：默认值是1，一个包被引用的次数大于等于该值才会进行拆包。如果设置了minChunks 则不应设置 minSize 和 maxSize，否则无法起效。
cacheGroups：设置该值可以把包输出到一个文件。可以设置多个打包规则和一个默认的打包规则，根据优先度的大小使用相应的打包规则。

  1. splitChunks: {
  2.       cacheGroups: {
  3.         svgVendor: {
  4.           test: /[\\]node_modules[\\]/,
  5.           filename: 'js/[id]_vendor.js',
  6.           priority: -10,
  7.         }, // 规则一：把node_modules 下的包输出到一个文件。优先度 -10
  8.         default: {
  9.           minChunks: 2,
  10.           filename: 'js/ccc_[id].js',
  11.           priority: -20,
  12.         } // 默认的打包规则，应该把优先度 priority 设置小一点
  13.       }
  14.     }

import 动态导入配置

异步导入的包，webpack 会自动拆包，不用配置 splitChunks，通过魔法注释、配置 output 的 chunkFilename 属性，optimization的 chunkIds 属性等手段，可以对拆包的文件重命名。

runtimeChunk

optimization 的 runtimeChunk 属性在用来配置是否生成一个入口文件的运行时文件。导入的包保存到运行时文件，入口文件导入运行时文件，当导入的包变化，入口文件不会变化，有利于长期缓存。设置为 true 开启功能。