概述
在实际开发中，我们可能会引入一些第三方库，比如说 jquery。但是在项目打包的时候，我们又不希望把它打包进我们的项目中，那么我们应该怎么去做呢？webpack 为我们提供了一个叫做 externals 的配置项，这个配置项可以指定我们想要忽略的第三方库，在打包的时候就不会把这些第三方库打包进来。
有些小伙伴可能会有一点疑问，我们使用了 jquery 但是又没打包进来，那项目还能运行吗？其实我们可以在 html 模版中使用 script 标签的方式，使用 cdn 的链接引入 jquery，这样相当于做了代码分割，而且使用现成的 cdn 链接，会让加载速度更快！
方案细节
假如我们在项目中引入了 jquery 这个库，我们又不想打包 jquery 库到我们的项目中，我们就可以进行如下配置:
module.exports = {
entry: ...
...
externals: {
// [npm 包名]：库名
jquery: 'jQuery'
}
}
我们来看看使用 externals 和不使用 externals 的打包结果分别是什么样的：
对比以上两张图，我们可以看出来最后打包出来的文件体积差别还是挺大的！配置 externals 以后，我们需要在 html 模版中手动引入 jquery 文件：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
完成以上操作以后，用 webpack 进行重新编译，dist / index.html 文件还是可以正常访问，并且不会因为里面使用了 jquery 的一些方法而报错。
结语
使用 externals 配置可以有效地将第三方库分离出来，结合cdn可以让我们的页面加载速度得到有效的提高！小伙伴们赶紧在自己的项目中实践起来吧。
