如何在打包时重命名第三方包名称(webpack | vite)？

Question

当前我的react项目引入了一个第三方库，比如是arco组件库。我在build的web项目时，我想针对node_modules下的arco目录代码，打包成一个特定的名称的文件。例如打包成AKClown.js, 我应该如何去实现呢?

Answer 1

如果你的项目是基于webpack搭建的脚手架，那么可以利用webpack的代码分割，分割第三方包，并重新命名；

optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                // 将 node_modules 里面的插件再分割出来
                arco: {
                    name: 'arco',
                    test: /[\\/]node_modules[\\/]AKClown[\\/]/,
                    priority: 6, 
                    chunks: 'initial' // 将什么类型的代码块用于分割，三选一： "initial"：入口代码块 | "all"：全部 | "async"：按需加载的代码块
                },
            },
        },
    },

参考文章：optimization.splitChunks