如何在Webpack中通过CDN异步引入外部库

我之前折腾Webpack配置的时候，也专门研究过怎么通过CDN加载第三方库，翻了你提到的那几个讨论帖还有官方文档，现在把这套公认的标准流程整理给你：

1. 核心逻辑 #

Webpack的externals配置就是专门干这个的——它会告诉Webpack：“这个库我已经通过外部渠道（比如CDN）加载到页面里了，你别把它打包进最终的bundle里，直接用页面上的全局变量就行”。完美解决了“不想把大体积第三方库塞进bundle，又想在代码里正常import使用”的需求。

2. 具体操作步骤 #

第一步：在HTML里引入CDN链接 #

先把第三方库的CDN脚本加到你的HTML文件里，比如引入jQuery的话，就在<body>末尾（或者<head>里加defer/async）加：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

第二步：配置Webpack的externals #

打开你的webpack.config.js，添加externals字段，键是你在代码里import/require的模块名，值是该库在页面上暴露的全局变量名：

module.exports = {
  // 其他配置（entry、output这些）...
  externals: {
    // 比如import $ from 'jquery'，就对应全局变量jQuery
    jquery: 'jQuery'
  }
};

第三步：在代码里正常使用 #

这时候你就可以像平时一样在JS文件里引入并使用了，Webpack会自动帮你映射到全局变量，不会把库打包进去：

import $ from 'jquery';

// 该怎么用就怎么用
$('#app').html('Hello from CDN jQuery!');

3. 常见扩展场景 #

• 多库批量配置：如果有多个CDN库，直接在externals里加多个键值对就行：

externals: {
  jquery: 'jQuery',
  lodash: '_',
  react: 'React',
  'react-dom': 'ReactDOM'
}

• 特殊全局变量处理：有些库的全局变量名比较特殊，或者你需要更灵活的映射，可以用函数形式的externals（比如处理UMD模块的情况）：

externals: {
  customLib: (context, request, callback) => {
    // 映射到window上的自定义全局变量
    callback(null, 'window.customLibGlobal');
  }
}

这个方案是目前社区里最常用的，既能大幅减小bundle体积，又能利用CDN的缓存优势，我自己在好几个项目里都用过，稳定性拉满~

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