基于Webpack构建的组件库如何实现代码分割并正常导出组件？

方案一：改用Rollup构建（推荐，更适配组件库场景） #

Rollup对ES模块的Tree Shaking支持更彻底，天生适合组件库的代码分割与按需导出需求：

1. 配置Rollup打包规则
   编写rollup.config.js，以主入口为例，开启模块保留与代码分割：

   import resolve from '@rollup/plugin-node-resolve';
   import commonjs from '@rollup/plugin-commonjs';
   import babel from '@rollup/plugin-babel';
   
   export default {
     input: 'src/index.js', // 你的组件库主入口
     output: [
       {
         dir: 'dist',
         format: 'es', // 输出ES模块，支持Tree Shaking
         sourcemap: true,
         preserveModules: true, // 保留组件独立文件结构
       }
     ],
     plugins: [
       resolve(),
       commonjs(),
       babel({ babelHelpers: 'bundled' })
     ],
     external: [] // 第三方依赖不想打包的话，在这里声明
   };
   

2. 配置package.json的exports字段
   让用户既可以导入整个库，也能按需导入单个组件：

   "name": "myLibrary",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./component1": "./dist/modules/component1/index.js",
     "./component2": "./dist/modules/component2/index.js",
     "./component3": "./dist/modules/component3/index.js"
   }
   

3. 自动Tree Shaking
   用户项目中使用import {Component1, Component2} from 'myLibrary'时，打包工具会自动剔除未使用的Component3，只打包用到的组件代码。

方案二：基于Webpack调整配置 #

如果坚持使用Webpack，需要修正library导出配置，配合splitChunks实现代码分割：

1. 修正library导出配置
   修改Webpack的output与optimization项，确保组件能被正确导出：

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'myLibrary.js',
       library: 'myLibrary',
       libraryTarget: 'umd', // 兼容多种模块规范
       globalObject: 'this',
       libraryExport: '*' // 匹配你的导出方式
     },
     optimization: {
       splitChunks: {
         chunks: 'all',
         cacheGroups: {
           components: {
             test: /src\/modules/, // 匹配组件目录
             name(module) {
               // 为每个组件生成单独文件
               const match = module.context.match(/src\/modules\/([^/]+)/);
               return match ? `component-${match[1]}` : 'components';
             },
             enforce: true
           }
         }
       },
       runtimeChunk: false // 关闭runtime单独分割，避免导出异常
     },
     // 其他loader、plugin配置...
   };
   

2. 开启Tree Shaking
   在package.json中添加sideEffects字段，让Webpack安全移除未使用代码：

   "sideEffects": false
   

3. 支持按需导入
   同样配置package.json的exports字段，允许用户直接导入单个组件文件：

   "exports": {
     ".": "./dist/myLibrary.js",
     "./component1": "./dist/component-component1.js"
   }
   

方案三：发布原生ES模块源码（零打包，体积最优） #

如果组件库基于纯ES模块编写（无CommonJS依赖），可以直接发布源码，让用户的打包工具处理Tree Shaking：

1. 配置package.json

   "name": "myLibrary",
   "type": "module",
   "main": "src/index.js",
   "exports": {
     ".": "./src/index.js",
     "./component1": "./src/modules/component1/index.js"
   },
   "sideEffects": false
   

2. 处理路径别名
   如果使用了@别名，在package.json的imports字段中配置：

   "imports": {
     "@/*": "./src/*"
   }
   

   用户安装后，Webpack/Rollup会直接解析源码，自动剔除未使用的组件，最终体积最小。

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