如何让Webpack打包的TypeScript函数在HTML中全局可调用？

方法1：用Webpack的Library配置暴露全局变量 #

这是最规范的做法，通过Webpack配置直接把需要暴露的函数挂载到全局window对象上：

1. 修改webpack.config.js的output配置：

module.exports = {
  entry: './src/main.ts',
  // 其他loader、plugin配置...
  output: {
    filename: 'bundle.js',
    library: {
      name: 'MyPlugin', // 自定义全局变量名
      type: 'window', // 指定挂载到window对象
    },
  },
};

2. 在TypeScript入口文件（比如src/main.ts）里导出需要调用的函数：

export function init() {
  // 这里写你的初始化逻辑
  console.log('插件初始化完成');
}

3. 打包后，在HTML的脚本里直接调用全局变量下的方法：

<head><script>/* 打包后的bundle代码 */</script></head>
<body></body>
<script>
  // 直接调用暴露的函数
  MyPlugin.init();
</script>

方法2：手动将函数挂载到window全局对象 #

如果不想改Webpack配置，直接在TS里把函数绑定到window上就行：

在src/main.ts里添加：

function init() {
  // 初始化逻辑
}

// 手动暴露到全局，TypeScript需添加类型断言
(window as any).init = init;

打包后，HTML里直接调用：

<head><script>/* 打包后的bundle代码 */</script></head>
<body></body>
<script>
  init();
</script>

关于iife: false无效的原因 #

你设置iife: false只是关闭了Webpack的立即执行函数包裹，但打包后的代码依然处于模块作用域（Webpack默认用模块系统封装代码），内部函数不会自动暴露到全局。所以必须主动通过上述两种方式把函数挂载到window，才能在外部脚本里调用。

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