webpack 如何处理 externals

理解 Webpack 处理 externals 的方法，首先需要熟悉 UMD（Universal Module Definition）概念。UMD 是为了兼容 AMD（Asynchronous Module Definition）和 CommonJS 模块规范，并允许全局变量导出，其核心是一个自执行函数，判断是否使用 CommonJS 或 AMD 规范，如不可用则直接暴露至全局。

当模块包含依赖时，UMD 架构使其适应不同模块规范，如 React、AntD 等库通常以此方式导出，以兼容多种环境。

Webpack 中 externals 配置用于忽略特定模块，加快打包速度，尤其对自定义库特别有用。配置时，明确指定要排除的模块，Webpack 会忽略这些模块，直接使用全局变量。

打包代码结构分析显示，引入模块通过自执行函数被加载，形成一个对象，作为入口模块依赖，整个程序以树形结构构建。

重点在于__webpack_require__函数，它利用闭包缓存模块，避免重复加载，确保模块仅导入一次，内部实现允许模块间相互导入。

externals 的原理在于配置中指定的模块被 Webpack 忽略，全局暴露的模块作为引用，UMD 引入的库因不具 AMD 和 CommonJS 环境，直接暴露全局，Webpack 可直接引用。

注意，由标签引入的库依赖需提前引入，如 React-DOM 需先全局暴露 React，避免打包时找不到依赖。

Webpack 模块系统兼容多种规范，若库在 Webpack 中打包未正确引入依赖，会导致报错，原因在于模块查找机制。

externals 高级配置允许更精细的控制，通过配置对象支持字符串、数组、函数等多种形式，实现更灵活的模块排除逻辑。配置方式多样，如 commonjs2 模式会进行特定处理，理解这些高级配置可优化打包过程。

您可能感兴趣问答

Collapsible

热门标签

热点问答