引入webpack打包的bundle.js后调用函数报未定义错误如何解决

报错原因 #

webpack默认会将所有模块封装在独立闭包内实现隔离，你通过export导出的方法仅对webpack管理的其他模块可见，不会自动挂载到浏览器window全局对象上，因此全局作用域下的内联脚本无法访问到out方法。
此外你给bundle.js添加了defer属性，该属性会让脚本延迟到DOM解析完成后再执行，而body内的内联脚本会在DOM解析到对应位置时立即执行，此时bundle.js还未运行，即便方法挂载到全局也会出现找不到的问题。

解决方案 #

方案1：修改webpack配置暴露导出内容到全局 #

适合需要对外暴露方法给全局脚本调用的场景，修改webpack配置如下：

// webpack.config.js
module.exports = {
  // 保留你原有的其他配置
  entry: './out.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
    // 新增以下配置，将导出内容挂载到window全局对象
    library: 'MyBundle',
    libraryTarget: 'window'
  }
}

修改out.js为命名导出（调用更方便）：

// out.js
export function out(str) {   
    //Some Code 
    console.log(str); 
}

调整HTML代码，确保调用时机在bundle加载完成后：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="bundle.js"></script>
    <script>
      MyBundle.out("Hello")
    </script>
  </body>
</html>

方案2：手动挂载方法到全局 #

不需要修改webpack配置，适合小型项目快速调整：

// out.js
export default function out(str) {   
    //Some Code 
    console.log(str); 
}
// 手动挂载到window全局
window.out = out;

同样建议将bundle的script标签移到body内联脚本之前，去掉defer属性保证加载顺序。

方案3：将调用逻辑纳入webpack打包流程（最推荐） #

符合webpack模块化开发的最佳实践，不需要暴露全局变量：

1. 新增业务入口文件index.js：

// index.js
import out from './out.js'
out("Hello")

2. 修改webpack配置的入口为index.js：

// webpack.config.js
module.exports = {
  entry: './index.js',
  // 其他原有配置保持不变
}

3. 移除HTML中的内联调用脚本即可，所有逻辑都会在bundle运行时自动执行。

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