vue打包失败: 修复 chunk 冲突

28 阅读1分钟
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  configureWebpack: {
    output: {
      filename: 'static/js/[name].[hash].js',
      chunkFilename: 'static/js/[name].[chunkhash].js'
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: 5,
            chunks: 'initial'
          }
        }
      }
    }
  },
  chainWebpack: config => {
    // 修复 chunk 冲突
    config.optimization
      .splitChunks({
        chunks: 'all',
        cacheGroups: {
          // 禁用默认的 vendors chunk
          default: false,
          vendors: false,
          // 自定义 vendor chunk
          vendor: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 20,
            chunks: 'all'
          },
          // 公共 chunk
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: 10,
            chunks: 'all',
            reuseExistingChunk: true
          }
        }
      })
  }
})