如何从HTML中调用Webpack打包的函数？解决未定义报错

这个问题我之前踩过坑！Webpack 默认会把你的代码包裹在模块作用域里，不会将 searchJobsEn 这类函数暴露到全局的 window 对象上，所以你在 HTML 里通过 onkeyup="searchJobsEn()" 直接调用时，浏览器就会报「未定义」的错误。下面给你几种可行的解决方案：

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

在你的源JS文件中，定义完 searchJobsEn 函数后，手动把它挂载到 window 上，让它成为全局变量：

function searchJobsEn() {
  // 你的函数逻辑
}

// 关键：挂载到window全局对象
window.searchJobsEn = searchJobsEn;

这样修改后，HTML里的 onkeyup="searchJobsEn()" 就能正常调用了。

方案2：通过Webpack配置暴露全局变量 #

如果你不想手动挂载，可以修改 webpack.config.js 的输出配置，让Webpack自动把你的模块暴露到全局：

module.exports = {
  // 其他配置（entry、module等）...
  output: {
    filename: 'bundle.js',
    // 配置全局库名和挂载目标
    library: 'JobSearchApp', // 自定义全局对象名称
    libraryTarget: 'window' // 指定挂载到window对象上
  }
};

如果你的函数是通过ES6导出的（比如 export function searchJobsEn() {}），那在HTML里就可以这样调用：

<input type="text" onkeyup="JobSearchApp.searchJobsEn()">

方案3：使用事件监听替代内联事件（推荐） #

更符合现代模块化开发的方式是，不要在HTML里写内联事件，而是在你的JS代码中直接绑定事件：

function searchJobsEn() {
  // 你的函数逻辑
}

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const inputElement = document.querySelector('#your-input-id');
  inputElement.addEventListener('keyup', searchJobsEn);
});

这种方式不需要依赖全局变量，代码耦合度更低，也更易维护。

额外注意事项 #

• 如果你的Webpack是生产模式（mode: 'production'），代码会被压缩混淆，可能会把 searchJobsEn 这类函数名改成短变量名。这时候如果用方案1，需要在Webpack的压缩配置里（比如 terser-webpack-plugin）把这个函数名加入不混淆的列表，避免找不到函数。
• 确保Webpack打包后的JS文件是在HTML中正确引入的，并且加载顺序在你的内联事件之前（比如把script标签放在body底部，或者加上defer属性）。

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