使用Webpack dependOn多依赖时出现构造函数报错问题排查

问题根源 #

你当前的配置存在冲突：dependOn是让Webpack在内部模块系统中管理chunk间的依赖，但你给所有入口都设置了libraryTarget: "var"和library: "[name]"，导致依赖模块（LibraryA、LibraryB）被导出为全局变量，而没有注册到Webpack的内部模块缓存中。EntryA的bundle尝试从Webpack模块系统中获取依赖，自然找不到，最终导致构造函数无法正常初始化。

解决方案 #

方案一：用Webpack原生模块共享机制（推荐） #

移除依赖入口的library配置，通过runtimeChunk提取公共运行时，让Webpack自动管理模块依赖：

修改webpack.config.js：

const path = require('path');

module.exports = {
  mode: "production",
  entry: {
    EntryA: {
      import: "./src/EntryA.js",
      dependOn: "shared"
    },
    // 将LibraryA和LibraryB合并为一个共享chunk
    shared: ["./src/library/LibraryA.js", "./src/library/LibraryB.js"]
  },
  output: {
    filename: "[name].min.js",
    path: path.resolve(__dirname, "bundle"),
    // 只给主入口设置library导出
    libraryTarget: "var",
    library: "EntryA",
    clean: true // 每次打包清空bundle目录
  },
  target: "web",
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env"] }
        }
      }
    ]
  },
  optimization: {
    // 提取公共的Webpack运行时，确保多个chunk共享模块系统
    runtimeChunk: 'single'
  }
};

对应的HTML引入顺序必须按以下顺序：

<html>
  <head>
    <script src="./bundle/runtime.min.js"></script>
    <script src="./bundle/shared.min.js"></script>
    <script src="./bundle/EntryA.min.js"></script>
  </head>
  <body>
    <script>
      window.onload = () => { const entryA = new EntryA(); }
    </script>
  </body>
</html>

方案二：手动映射全局变量依赖 #

如果需要单独导出LibraryA和LibraryB为全局变量，可以通过externals配置让EntryA直接引用全局变量，无需使用dependOn：

修改webpack.config.js：

const path = require('path');

module.exports = {
  mode: "production",
  entry: {
    EntryA: "./src/EntryA.js",
    LibraryA: "./src/library/LibraryA.js",
    LibraryB: "./src/library/LibraryB.js"
  },
  output: {
    filename: "[name].min.js",
    path: path.resolve(__dirname, "bundle"),
    libraryTarget: "var",
    library: "[name]",
    clean: true
  },
  // 将EntryA中的相对路径依赖映射为全局变量
  externals: {
    "./library/LibraryA.js": "LibraryA",
    "./library/LibraryB.js": "LibraryB"
  },
  target: "web",
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env"] }
        }
      }
    ]
  }
};

HTML引入顺序保持你原来的即可，EntryA会直接使用全局的LibraryA和LibraryB变量。

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