Webpack构建的JS模块无法在HTML中调用，SignIn函数未定义

问题描述 #

使用Webpack构建JavaScript模块，配置文件webpack.config.js中把auth.js包含在main入口里，构建成功后index.html已注入main.js和msal.js的script标签，但通过<body onLoad='SignIn()'>调用auth.js中的SignIn()函数时，浏览器提示该函数未定义。

原因分析 #

Webpack默认会将所有模块包裹在闭包中，模块内部的函数不会自动暴露到全局window对象上。浏览器的全局环境无法直接访问模块内部定义的函数，因此会出现"未定义"的报错。

解决方法 #

方法1：手动将函数挂载到window对象 #

在auth.js中，将SignIn函数挂载到全局window对象上，让浏览器能在全局环境找到它：

// auth.js
function SignIn() {
  // 你的登录逻辑代码
}

// 挂载到全局window
window.SignIn = SignIn;

如果用ES模块语法：

// auth.js
export function SignIn() {
  // 你的登录逻辑代码
}

// 在入口文件（比如app.js）中导入并挂载
import { SignIn } from './auth.js';
window.SignIn = SignIn;

方法2：使用DOM事件监听替代onLoad属性 #

更符合模块化开发的做法是，避免依赖全局函数，直接在入口文件中监听页面加载事件并调用函数：

// app.js
import { SignIn } from './auth.js';

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', () => {
  SignIn();
});

同时去掉<body>标签上的onLoad属性。

方法3：配置Webpack让模块暴露为全局库 #

在webpack.config.js的output配置中，设置library选项，将整个main chunk暴露为全局对象：

module.exports = {
  // ...其他配置
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    // 添加以下配置
    library: {
      name: 'MyApp', // 全局对象名称
      type: 'window' // 挂载到window上
    }
  },
  // ...其他配置
}

此时需要确保auth.js中导出SignIn函数，然后在页面中通过MyApp.SignIn()调用：

<body onLoad='MyApp.SignIn()'>

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