本文将深入解析Webpack中的"externals"功能，这是一个在构建项目时常用的优化手段。通常情况下，当我们开发项目时，可能会将第三方库（如jQuery或Lodash）打包进bundle中。然而，如果某个库不需要被编译，或者为了减少bundle体积，可以利用externals来实现。
externals的功能在于允许Webpack忽略特定的依赖库，即使在代码中直接引用这些库（例如，通过CMD、AMD规范或全局window对象）。要使用externals，你需要遵循以下步骤：
1. 在HTML中引入第三方库的CDN：确保在项目引用外部库时，用户可以从公共网络直接获取，无需webpack处理。
```html
<script src="https://cdn.example.com/jquery"></script>
```
2. 配置webpack externals：在webpack配置文件中添加externals选项，指定要外部化的库及其引用方式。以jQuery为例：
```javascript
externals: {
jquery: 'jQuery',
},
```
这意味着当你在JavaScript中写`require('jquery')`时，Webpack不会将其打包，而是查找全局的jQuery对象。
3. 在JS代码中引用库：按照常规方式使用这些库，它们将在运行时被自动加载，无需从bundle中提取。
```javascript
const $ = require('jquery');
$("#content").html("<h1>helloworld</h1>");
```
externals的工作原理是，在webpack打包过程中，遇到externals配置中的库名时，它会跳过实际的模块加载，直接在全局作用域中查找。例如，`module.exports = jQuery`表明externals配置的匹配项与全局变量相等，因此require('jquery')会直接指向window.jQuery。
此外，externals支持全局模式，如`jquery`配置所示，这允许你在不需要显式require的情况下直接使用全局变量。尽管如此，推荐还是保持良好的编程习惯，即使使用externals，也应避免直接使用全局变量，以防污染全局命名空间。
externals是Webpack中的一种策略，它允许你控制哪些库应该在浏览器环境中作为独立的外部资源处理，从而实现更好的性能优化和模块化管理。理解并灵活运用externals，有助于提升项目的构建效率和代码可维护性。
我的内容管理
展开
