Webpack+TypeScript打包的bundle.js无法运行，点击按钮报greet未定义错误

嘿，这个问题我太熟了！本质原因是Webpack默认会把你的代码封装在独立的模块作用域里，不会把greet函数暴露到全局的window对象上，但HTML里的onclick是在全局作用域找这个函数的，所以才会报“未定义”的错。

给你几个实用的解决思路：

• 手动把函数挂载到全局对象
  修改你的index.ts，把greet挂到window上，让全局能访问到：

  function greet(){ 
    let p:HTMLElement = document.getElementById("p1")!; // 加!规避null类型报错
    p.innerHTML = "hello"; 
  }
  
  // 挂载到window对象
  (window as any).greet = greet;
  

  改完之后，HTML里的onclick="greet()"就能正常工作了。

• 用DOM事件绑定替代内联onclick（更推荐）
  这种方式不用依赖全局作用域，代码也更符合现代前端规范。修改index.ts：

  function greet(){ 
    let p:HTMLElement = document.getElementById("p1")!;
    p.innerHTML = "hello"; 
  }
  
  // 等页面DOM加载完成后绑定点击事件
  document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById("your-button-id")!;
    btn.addEventListener('click', greet);
  });
  

  然后HTML里删掉按钮的onclick属性，只保留按钮的id就行。

• 配置Webpack让模块导出为全局变量
  要是不想改代码，可以在Webpack配置文件里加output.library相关配置，让打包后的代码把变量暴露到全局：

  // webpack.config.js
  module.exports = {
    // 其他配置项...
    output: {
      filename: 'bundle.js',
      library: 'MyGlobalLib', // 自定义全局对象名
      libraryTarget: 'window' // 指定挂载到window上
    }
  };
  

  接着修改index.ts导出greet：

  export function greet(){ 
    let p:HTMLElement = document.getElementById("p1")!;
    p.innerHTML = "hello"; 
  }
  

  之后HTML里可以用onclick="MyGlobalLib.greet()"来调用函数。

另外提个小细节：你的TypeScript代码里document.getElementById("p1")可能返回null，最好加上非空断言!或者做个null判断，避免潜在的运行时错误哦~

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