webpack 项目中如何使用 external 模块

在Webpack项目中使用external模块的关键在于有效地减少最终构建包的大小、提升构建速度，以及避免在多个项目中重复打包相同的库。通过将一些常用的库（如React、Lodash等）标记为externals，你可以让Webpack知道在打包时跳过这些库，而是在运行时从外部环境中获取这些依赖，这一策略特别适合用于库开发或者大型项目优化。

接下来，我们会深入探讨如何实现精确控制依赖外链的技巧，特别是在处理提升构建速度这一核心点时。将常用库设为external，Webpack在构建过程中不再对这些库进行处理，这样不仅可以显著缩短构建时间，还能让最终部署的代码更加轻量，实际上这对于提高应用加载速度和优化用户体验有着直接的积极影响。

一、理解WEBPACK EXTERNALS

Webpack的externals配置选项允许你定义哪些模块不应该被Webpack打包，而是在运行时从环境中获取。这个功能特别适用于那些希望依赖某些全局变量或者从CDN加载库的项目。

首先，为了有效利用externals，理解它的工作机制非常重要。当你将一个模块指定为external后，Webpack在打包时会跳过它，你需要确保在应用运行时这个模块已经可用，这可以通过在HTML文件中引入脚本标签实现，或者依赖于现有的JavaScript环境（如Node.js）。

二、配置WEBPACK EXTERNALS

配置externals相对直观，主要通过webpack配置文件来完成。你需要在配置项中添加一个externals字段，它可以是一个对象、函数、或正则表达式，这提供了高度的灵活性来适应不同的使用场景。

对象形式配置

对象形式是最简单直接的配置方式，你可以指定一个外部依赖的名称及其在全局环境中对应的变量名。例如，如果你希望从CDN引入React而不是将其打包，可以这样配置：

externals: {

  react: 'React'
}

这告诉Webpack，每当遇到import React from 'react'时，不要将其打包，而是在运行时从全局的React变量中获取。

函数形式配置

函数形式提供了更多的控制能力，你可以基于请求的详细信息动态地决定一个模块是否应该被视为external。这在处理复杂的场景时非常有用。

externals: (context, request, callback) => {

  if (/lodash/.test(request)){
    return callback(null, 'commonjs ' + request);
  }
  callback();
}

这段配置表示，对于所有引入lodash的请求，将其标记为external，并在运行时通过commonjs规范来获取。

三、优化策略和实践技巧

在配置了externals后，有几个实践技巧可以帮助你更有效地利用这一特性。

利用CDN提速

将常用库通过CDN引入而不是打包到应用代码中，可以显著提升应用的加载速度。这种方法特别适合那些大众常用的库，因为用户可能已经在其设备上缓存了这些库的CDN版本。

多项目共享依赖

在微服务架构或是微前端架构中，多个项目可能共享一套基础库。通过配置externals并从一个统一的来源加载这些依赖，可以避免在每个项目中重复打包，同时确保依赖的一致性。

四、常见问题解决方案

虽然externals提供了很大的灵活性，但在实际使用过程中也可能遇到一些问题。

跨版本依赖问题

当依赖的外部库有多个版本时，可能会导致兼容性问题。解决这一问题的策略之一是确保项目环境中引用的是一个兼容所有现有代码的版本，或者采用适配层来兼容不同的版本。

外部变量不可用

当你从外部环境（如CDN或全局变量）加载库时，需要确保在应用代码运行前这些库已经加载完毕。这通常意味着你需要正确地管理脚本加载顺序，确保依赖可用。

通过精心规划和配置Webpack externals，开发者可以优化项目的构建过程，提升应用性能，并简化依赖管理。适当利用这一功能，将使你的项目更加高效和可维护。

相关问答FAQs：

如何在 webpack 项目中使用 external 模块？

1. 什么是 external 模块？
   外部模块是指我们在项目中引入的一些不需要通过打包编译的第三方库或者模块。使用 external 配置项可以告诉 webpack 在打包过程中不要将这些模块合并进最终的打包文件中。

2. 如何配置 external 模块呢？
   可以在 webpack.config.js 文件中的 externals 配置项中指定需要作为 external 模块的库或者模块。例如，如果你想将 lodash 作为 external 模块引入，可以这样配置：

module.exports = {
  // ...
  externals: {
    lodash: '_'
  }
  // ...
};

这样配置后，webpack 在打包过程中会跳过对 lodash 模块的处理，而是在最终的打包文件中使用全局变量 _ 来代替。

3. 如何在代码中使用 external 模块呢？
   由于 external 模块不会被打包进最终的文件中，因此你需要在代码中手动引入这些外部模块。以 lodash 为例，你可以在代码中使用以下方式引入：

import _ from 'lodash';

或者

const _ = require('lodash');

这样你就可以在项目中正常使用 lodash 了。

【注意】在使用 external 模块时，需要保证你的项目中已经引入了对应的库或者模块。否则在运行时可能会出现找不到模块的错误。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。