Webpack编译类库：实现跨项目按目录结构导入组件与工具

1. 调整Webpack多入口配置 #

将单一入口改为多入口，让ui、utils子目录单独打包，同时适配输出结构：

const path = require("path");

module.exports = {
  // 多入口配置：根入口 + ui、utils子入口
  entry: {
    main: "./src/index.ts",
    ui: "./src/ui/index.ts",
    utils: "./src/utils/index.ts",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    // 用[name]匹配入口名，生成对应输出文件
    filename: "[name].js",
    // 为每个入口设置对应library标识
    library: {
      main: {
        name: "@company/library",
        type: "umd",
        umdNamedDefine: true,
      },
      ui: {
        name: "@company/library/ui",
        type: "umd",
        umdNamedDefine: true,
      },
      utils: {
        name: "@company/library/utils",
        type: "umd",
        umdNamedDefine: true,
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  externals: {
    react: "react",
    "react-dom": "react-dom",
  },
};

2. 配置TypeScript生成子路径类型 #

修改tsconfig.json，确保子目录类型文件正确输出：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "./dist/types", // 类型文件输出目录
    "outDir": "./dist",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "NodeNext",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

同时确保子目录的index.ts正确导出内容：

• src/ui/index.ts：

export { default as Button } from "./Button/Button";
export { default as Input } from "./Input/Input";

• src/utils/index.ts：

export { myUtilFunc1 } from "./myUtilFunc1";
export { myUtilFunc2 } from "./myUtilFunc2";

3. 更新package.json核心配置 #

通过exports字段定义子路径映射，让打包工具识别子路径导入：

{
  "name": "@company/library",
  "main": "dist/main.js",
  "module": "dist/main.js",
  "types": "dist/types/index.d.ts",
  // 子路径导出规则
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "import": "./dist/main.js",
      "require": "./dist/main.js"
    },
    "./ui": {
      "types": "./dist/types/ui/index.d.ts",
      "import": "./dist/ui.js",
      "require": "./dist/ui.js"
    },
    "./utils": {
      "types": "./dist/types/utils/index.d.ts",
      "import": "./dist/utils.js",
      "require": "./dist/utils.js"
    }
  },
  // 确保发布时包含所有必要文件
  "files": [
    "dist/**/*"
  ]
}

4. 验证导入方式 #

现在在业务项目中可同时支持两种导入方式：

• 根导入（兼容原有用法）：

import { Button, myUtilFunc2 } from "@company/library";

• 子路径导入（目标用法）：

import { Button } from "@company/library/ui";
import { myUtilFunc2 } from "@company/library/utils";

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