Webpack 多入口依赖注入（dependOn）失效问题的解决方案

当使用 webpack 的 `dependon` 配置拆分多个入口模块时，若仍采用 commonjs 的 `require()` 语法，会导致运行时报错（如 `entrya is not a constructor`），根本原因是模块导出/导入机制不兼容；改用 es module 的 `import/export` 可彻底解决。

在 Webpack 5+ 中，dependOn 是一种声明式依赖管理机制，用于确保某些 chunk（如公共库）在目标入口 chunk 执行前被加载并初始化。但该机制严格依赖模块系统的语义一致性——尤其是导出（export）与导入（import）必须匹配，且需由 Webpack 统一解析和链接。

你遇到的错误：

Uncaught TypeError: o[r] is not a function  
Uncaught TypeError: EntryA is not a constructor

本质上是由于 require("./library/LibraryA.js") 返回的是一个 CommonJS 对象（如 { default: class LibraryA { ... } }），而 Webpack 在 dependOn 拆包后，将 LibraryA 入口生成为独立 chunk 并以 libraryTarget: "var" 暴露为全局变量 LibraryA。此时，EntryA.min.js 中的 require(...) 并不会自动从全局作用域读取 LibraryA，而是尝试通过内部模块图查找——但由于 LibraryA 已被提取为独立 entry，其模块 ID 和导出形态与原始 require 期望不一致，导致引用失效。

✅ 正确做法：统一使用 ES Module 语法，并配合 Webpack 的 library.export 显式控制导出

以下是修复后的完整实践方案：

1. 重写源码为 ES Module 形式

// ./src/library/LibraryA.js
export default class LibraryA {
  constructor() {
    console.log("LibraryA");
  }
}

// ./src/library/LibraryB.js
export default class LibraryB {
  constructor() {
    console.log("LibraryB");
  }
}

// ./src/EntryA.js
import LibraryA from "./library/LibraryA.js";
import LibraryB from "./library/LibraryB.js";

class EntryA {
  constructor() {
    console.log("EntryA");
    const libraryA = new LibraryA();
    const libraryB = new LibraryB();
  }
}

export default EntryA;

2. 更新 Webpack 配置（关键增强）

const path = require("path");

module.exports = {
  mode: "production",
  entry: {
    EntryA: {
      import: "./src/EntryA.js",
      dependOn: ["LibraryA", "LibraryB"]
    },
    LibraryA: "./src/library/LibraryA.js",
    LibraryB: "./src/library/LibraryB.js"
  },
  output: {
    filename: "[name].min.js",
    path: path.resolve(__dirname, "bundle"),
    libraryTarget: "var",
    library: "[name]",
    // ? 显式指定每个 entry 的导出路径，确保全局变量名准确映射
    libraryExport: "default" // ← 关键！让 export default 成为 window.LibraryA
  },
  target: "web",
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  }
};

3. HTML 加载顺序保持不变（但语义已正确）

⚠️ 注意事项：

• libraryExport: "default" 必须显式设置，否则 export default class X 不会挂载到 window.LibraryA，而是挂载为 window.LibraryA.default；
• 若使用命名导出（如 export class LibraryA），则 libraryExport 应设为 "LibraryA"；
• dependOn 仅控制执行顺序与 chunk 依赖关系，不自动注入全局变量；全局暴露仍依赖 libraryTarget + libraryExport 的精确配置；
• Babel 需启用 @babel/plugin-transform-modules-commonjs 的反向转换（默认开启），但更推荐直接使用原生 ESM（Webpack 5+ 原生支持）以避免转换歧义。

? 总结：Webpack 的 dependOn 不是“脚本加载器”，而是模块图编排工具。它要求所有参与依赖链的模块使用同一套模块协议（ESM）。混用 require 和多 entry 拆分，会破坏 Webpack 的模块解析一致性——因此，统一迁移到 import/export，并配准 libraryExport，才是稳定、可维护的解法。