Webpack从其他chunk导入旧模块而非同chunk最新版本的问题咨询

问题根源 #

你遇到的是Webpack默认模块ID生成策略与多独立构建共存场景的冲突：Webpack默认的模块ID生成规则会基于文件的相对路径生成稳定ID，当通用JS、页面JS分两次独立构建时，相同相对路径的文件会被分配相同的ID。而多个Webpack构建产物同时在页面运行时，默认会共享全局的模块注册池，后加载的模块如果ID和已注册的重复，就会直接复用先注册的旧版本模块，最终导致方法不存在的报错。

解决方案 #

你一开始尝试配置的output.moduleId是错误的属性，模块ID的生成规则需要在optimization.moduleIds中配置，结合你使用的Webpack版本选择对应方案即可：

Webpack 5 版本

优先用隔离构建作用域的方案，改造成本最低，从根本上避免跨构建的ID冲突：

// webpack.config.js
module.exports = {
  output: {
    // 关键配置：给通用JS构建、页面JS构建分别设置不同的唯一值
    // 比如通用构建填"global-app"，login页面构建填"login-page"
    uniqueName: "your-build-unique-identifier",
    // 其余原有output配置保留
  },
  optimization: {
    // 可选配置：如果需要模块ID随文件内容变化，开启该配置即可
    moduleIds: "deterministic"
  }
}

配置不同的uniqueName后，两次构建的模块注册空间会完全隔离，就算出现相同ID也不会互相覆盖。

Webpack 4 版本

配置逻辑和Webpack 5一致，只是对应属性名不同：

// webpack.config.js
module.exports = {
  output: {
    // 关键配置：不同构建设置不同的唯一值
    jsonpFunction: "webpackJsonp_your_unique_id",
    // 其余原有output配置保留
  },
  optimization: {
    // 可选配置：模块ID基于内容哈希生成
    moduleIds: "hashed"
  }
}

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