Webpack打包后无法识别导出函数：Firebase环境下导入报错

问题分析 #

你当前的Webpack默认打包输出的是IIFE格式代码，并非标准ES模块。即便入口文件里用了export语法，打包后的文件也不会以ES模块方式暴露导出内容，导致import { hello }找不到对应导出项。

解决方法 #

1. 修改Webpack配置为ES模块输出（推荐，Webpack 5+支持） #

在output配置中添加library.type，同时开启experiments.outputModule：

const path = require('path');

module.exports = {
  mode: 'development',
  watch: true,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public/dist'),
    filename: 'bundle.js',
    library: {
      type: 'module' // 指定输出为ES模块
    }
  },
  experiments: {
    outputModule: true // Webpack 5需开启该实验特性
  }
}

2. 临时替代方案（不推荐，适用于无法升级Webpack的场景） #

如果暂时无法升级到Webpack 5，可将导出函数挂载到全局window对象：
修改src/index.js：

export function hello() { console.log('Hello World!') };
window.hello = hello; // 挂载到全局作用域

然后在HTML中直接调用：

<script>
  hello();
</script>

验证 #

修改配置后重新执行Webpack打包，bundle.js会以ES模块格式输出，此时<script type='module'>中的import { hello } from '/dist/bundle.js'即可正常导入并调用函数。

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