如何在Webpack/Vite打包时重命名第三方包（如Arco）输出文件名？

根据项目使用的构建工具不同，分别提供对应配置方案：

一、Webpack 项目直接配置 #

在项目根目录的webpack.config.js中，通过optimization.splitChunks实现拆分打包：

module.exports = {
  // ...其他已有配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        arcoBundle: {
          // 匹配node_modules下的Arco组件库目录
          test: /[\\/]node_modules[\\/]@arco-design[\\/]/,
          // 指定打包后的文件名
          name: 'AKClown',
          // 输出路径与完整文件名，可根据项目结构调整
          filename: 'js/AKClown.js',
          // 同步、异步代码都纳入拆分范围
          chunks: 'all',
          // 设为更高优先级，避免和其他第三方包合并
          priority: 10,
          // 强制拆分，无视默认的体积限制
          enforce: true
        }
      }
    }
  }
};

二、Vite 项目配置 #

在vite.config.js中通过build.rollupOptions.output.manualChunks指定拆分规则：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 键为打包后的文件名，值为需要打包的Arco包名数组
          AKClown: ['@arco-design/web-react', '@arco-design/web-react/icon']
        }
      }
    }
  }
});

三、Create React App（CRA）项目配置 #

CRA默认隐藏Webpack配置，需要通过craco修改配置：

1. 先安装依赖：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 添加Arco组件库的拆分规则
      webpackConfig.optimization.splitChunks.cacheGroups.arcoBundle = {
        test: /[\\/]node_modules[\\/]@arco-design[\\/]/,
        name: 'AKClown',
        filename: 'static/js/AKClown.js',
        chunks: 'all',
        priority: 10,
        enforce: true
      };
      return webpackConfig;
    }
  }
};

3. 修改package.json中的脚本命令，将react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

注意事项 #

• 执行npm run build后，可在dist目录中找到生成的AKClown.js文件，HTML会自动引入该资源，无需手动修改。
• 如果需要包含Arco的其他子包，可修改test正则或manualChunks中的包名数组，确保所有相关代码都被打包到指定文件中。

内容的提问来源于stack exchange，提问作者AKclown