webpack打包bundle.js无法被外部script标签访问，实例化Model3dLauncher报未定义

你在打包生成的bundle.js里能搜到Model3dLauncher的代码，但在外部script标签中始终报“未定义”，核心原因是webpack默认的模块作用域隔离机制。
webpack打包时会把所有源码包裹在独立的闭包中运行，你在src目录下定义的函数、类、变量，默认都属于这个闭包的内部作用域，不会自动泄露到浏览器的全局window对象上。哪怕你开启了TerserPlugin的keep_fnames配置，让压缩阶段没有把类名混淆掉，这些类也依然被困在闭包内部，外部的普通script标签根本没有权限访问。

因为你的需求是在独立的script标签中直接初始化Model3dLauncher实例，可以选择以下任意一种方案落地：

• 方案1：手动将目标类挂载到全局对象
  不需要改动webpack核心配置，直接在定义Model3dLauncher类的源码文件、或者项目入口src/index.js的末尾，加一行挂载代码：

  // 在类定义完成后执行
  window.Model3dLauncher = Model3dLauncher
  

  这行代码会在打包后的代码运行时，直接把类的引用绑定到浏览器全局的window对象上，外部script标签自然就能正常访问、创建实例。
• 方案2：通过webpack output配置显式指定全局暴露规则
  补充修改现有webpack配置的output部分，让webpack打包时自动完成全局挂载，不需要手动在源码里写window赋值：

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // 新增全局暴露配置
    library: {
      name: 'Model3dLauncher', // 要暴露到全局的变量名
      type: 'window' // 指定挂载目标为浏览器window全局对象
    }
  }
  

  注意：使用这个方案时，需要在入口文件src/index.js中显式导出Model3dLauncher类：

  export default Model3dLauncher
  

  webpack才会把导出的内容按配置规则挂载到全局作用域。

很多开发者会误以为TerserPlugin的keep_fnames配置能解决全局访问的问题——这个配置的唯一作用，就是代码压缩时不把类名、函数名替换成a、b、c这类短字符，方便你在打包后的bundle源码里搜到类的定义，但它完全不涉及作用域的变更，从根源上解决不了“变量未定义”的报错。

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