使用webpack打包类库时导入pgl提示未找到报错求助

导入报错的核心原因是webpack未按类库模式配置打包规则。webpack默认针对Web应用的打包逻辑会把所有代码包裹在自执行闭包里，不会对外暴露任何ESModule/CommonJS规范的导出接口，外部项目自然无法识别入口文件中编写的导出逻辑，最终抛出import not found : pgl错误。

• 第一步：修改webpack配置，开启类库打包模式
  找到项目中的webpack配置文件，修改output字段，添加类库导出相关配置，原有entry、loader、plugin等配置保持不变即可：

  const path = require('path');
  module.exports = {
    // 原有entry等配置保留
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'pgl.js',
      // 以下是类库打包核心配置
      library: {
        name: 'pgl',
        // 输出UMD格式，兼容ESModule、CommonJS、AMD、script标签全局引入全场景
        type: 'umd',
        // 对应入口文件的导出规则
        export: 'default'
      },
      // 如果类库依赖第三方包（比如three.js），配置externals避免把依赖重复打包进产物
      externals: {
        three: 'THREE'
      }
    }
  }
  

• 第二步：统一入口文件的导出写法
  把入口文件的具名导出改为默认导出，和上面的webpack配置匹配，兼容性更好：

  // 入口文件代码
  const PGL = {
    Graph,
    Geometry,
    GraphMethods,
    SampleData,
    Constructors,
    Drawing,
    Utilities,
    threeDWrapper,
    GraphDrawer,
    logStatus
  };
  // 改为默认导出
  export default PGL;
  

• 第三步：调整外部项目的导入语法
  因为改为了默认导出，外部项目导入时不需要加花括号：

  // 正确导入写法
  import pgl from "../build/pgl.js";
  // 可以直接调用pgl下的方法，比如pgl.Graph、pgl.logStatus()
  

  如果坚持使用具名导出，只要把webpack配置里的library.export字段改为'pgl'，原有import {pgl} from "../build/pgl.js"的写法即可正常工作。
• 第四步：验证配置生效
  重新执行webpack打包命令后，打开产出的build/pgl.js文件，若文件尾部存在如下多场景导出逻辑，说明配置已经生效：

  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = __webpack_exports__;
  else if (typeof define === 'function' && define.amd)
    define([], () => __webpack_exports__);
  else if (typeof exports === 'object')
    exports["pgl"] = __webpack_exports__;
  else
    root["pgl"] = __webpack_exports__;
  

• 不要直接用webpack默认的Web应用配置打包可复用类库，默认配置产出的文件只能通过script标签引入，通过全局变量访问，不支持模块化导入
• webpack5请使用上述library对象的配置方式，旧版libraryTarget的单独配置写法在webpack5中存在兼容问题
• 如果外部项目使用Vite、Rollup等其他构建工具，不要把打包后的pgl.js加入依赖预构建忽略列表，否则可能出现导出识别异常
• 后续如果要发布到npm供多项目复用，可以在项目package.json中添加"main": "./build/pgl.js", "module": "./src/index.js"字段，方便各构建工具自动识别模块入口

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