splitChunks--解决打包之后页面空白

webpack打包之后第三方依赖都会打包到vendors中，这就导致了vendor包过大

为了解决这个问题我使用了webpack中optimization.splitChunks来分割代码

config.optimization.splitChunks({
        cacheGroups: {
          common: {
            name: 'chunk-common', // 打包后的文件名
            chunks: 'initial', // 
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          'element-plus': {
            name: 'chunk-element-plus',
            test: /[\\/]node_modules[\\/]element-plus[\\/]/,
            chunks: 'initial',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })

配置完开开心心的打包
结果发现页面空白 ？？？？？
打开控制台有空，分割出来的没有加载，什么preload啥的

然后看了下pages的配置

 index: {
      template: 'public/index.html',
      entry: 'src/pages/index/main.ts',
      filename: 'index.html',
      title: 'index',
      keywords: 'index',
      description: 'index',
      chunks: [
        'chunk-vendors',
        'chunk-common',
        'index',
      ]
    },
    admin: {
      template: 'public/admin.html',
      entry: 'src/pages/admin/main.ts',
      filename: 'admin.html',
      title: 'admin',
      keywords: 'admin',
      description: 'admin',
      chunks: [
        'chunk-vendors',
        'chunk-common',
        'admin',
      ]
    }

发现是因为没有引入分割后的chunk
我们把chunk-element-plus加入即可
在重新打包就能正常加载了