Webpack 5如何将自定义函数挂载到window对象并实现外部访问

问题根因 #

你遇到的问题是Webpack 5打包规则变化和当前配置共同导致的，核心原因有两个：

1. 配置中开启了runtimeChunk: "single"，Webpack会独立生成运行时依赖文件runtime.bundle.js，你当前只引入了common.bundle.js，缺少运行时依赖会导致common.bundle.js里的代码根本没有执行，挂载window的逻辑自然没有生效。
2. 你配置的splitChunks规则会把node_modules相关的公共依赖拆分到other.bundle.js，如果common.bundle.js依赖这部分代码，未引入该文件也会导致代码执行失败。

解决方案 #

方案一：补全引入脚本（最快修复） #

打包后dist目录会生成至少三个JS文件，你需要按依赖顺序引入到index.html中：

<head>
    // rest of the head stuff
    <script src="./dist/runtime.bundle.js"></script>
    <script src="./dist/other.bundle.js"></script>
    <script src="./dist/common.bundle.js"></script>
</head>

引入完成后原来手动挂载window.someFunction的代码就能正常执行，外部脚本可以直接访问该方法。

方案二：通过output.library显式暴露全局（更规范，推荐） #

不需要手动写window挂载逻辑，通过Webpack原生配置自动暴露全局变量，稳定性更高：

1. 调整index.js代码，导出要暴露的方法：

// index.js
export function someFunction (...args) {
    // function body
}
// 可以同时导出多个需要暴露的方法/变量
export const otherUtils = { /* 其他全局工具 */ }

2. 修改webpack.config.js的output配置，新增library相关参数：

output: {
  pathinfo: true,
  path: path.join(__dirname, "dist"),
  filename: "[name].bundle.js",
  // 新增以下配置
  library: 'MyApp', // 自定义挂载到window上的根变量名
  libraryTarget: 'window' // 指定挂载目标为window对象
}

打包完成后，外部脚本可以直接通过window.MyApp.someFunction()调用方法，也可以按需解构使用。

方案三：关闭不必要的代码拆分 #

如果你打包common入口的目的就是生成独立可执行的全局工具包，可以调整打包配置关闭拆分：

• 删除optimization中的runtimeChunk: "single"配置
• 调整splitChunks规则，排除common入口的拆分逻辑
  调整后打包生成的common.bundle.js就是完整可独立执行的文件，原来的window挂载逻辑可以正常运行。

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