当使用 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 显式控制导出
以下是修复后的完整实践方案：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
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 加载顺序保持不变（但语义已正确）
<!DOCTYPE html>
<html>
<head>
<script src="./bundle/LibraryA.min.js"></script>
<script src="./bundle/LibraryB.min.js"></script>
<script src="./bundle/EntryA.min.js"></script>
</head>
<body>
<script>
window.onload = () => {
const entryA = new EntryA(); // ✅ 现在可正常实例化
};
</script>
</body>
</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，才是稳定、可维护的解法。
