Webpack 外部扩展(Externals)
在使用 Webpack 构建项目时，有时候我们希望将一些库或模块从打包文件中排除，而是在运行时从外部引入。这种情况下就需要使用 externals 配置来告诉 Webpack 哪些模块应该作为外部依赖来引入。
为什么使用外部扩展(Externals)？
减少打包体积：将一些常用的库或框架作为外部扩展，可以减少打包文件的体积，加快页面加载速度。
提高缓存效率：外部扩展的模块不会被打包进最终的输出文件中，因此可以利用浏览器的缓存机制，提高页面的加载速度。
避免重复加载：如果多个模块都依赖同一个外部库，使用外部扩展可以避免重复加载同一个库的问题。
如何配置外部扩展(Externals)？
在 Webpack 的配置文件中，可以通过 externals 属性来配置外部扩展。以下是一个示例：
-------------- - -
-----
---------- -
------- -
--------- ---------
---------- ---------
---- ---------
----- ---
-
-
--上面的配置告诉 Webpack 在打包过程中将 lodash 模块排除在外，并在运行时从全局变量 _ 中引入 lodash。
外部扩展的配置选项
commonjs: 在 CommonJS 环境中使用外部扩展时的模块名。
commonjs2: 在 CommonJS2 环境中使用外部扩展时的模块名。
amd: 在 AMD 环境中使用外部扩展时的模块名。
root: 在全局变量中使用外部扩展时的变量名。
总结
通过配置外部扩展，我们可以更加灵活地管理项目的依赖关系，提高页面的加载速度和性能。在开发大型项目时，合理使用外部扩展可以帮助我们更好地组织和优化代码。