推荐答案
Webpack 的 externals 配置用于防止将某些 import 的包打包到最终的 bundle 中，而是通过外部环境（如全局变量、CDN 等）来引入这些依赖。这样可以减少打包体积，优化加载性能。
本题详细解读
1. externals 的作用
externals 配置允许你在打包时排除某些依赖，这些依赖通常是通过 <script> 标签或其他方式在运行时引入的。通过这种方式，Webpack 不会将这些依赖打包到最终的输出文件中，而是保留对它们的引用。
2. 使用场景
- 使用 CDN 引入库：例如，如果你通过 CDN 引入了 jQuery，可以在
externals中配置jquery，这样 Webpack 就不会将 jQuery 打包到最终的 bundle 中。 - 避免重复打包：在大型项目中，某些库可能已经被其他模块引入，使用
externals可以避免重复打包这些库。
3. 配置方式
externals 可以配置为字符串、对象或函数。常见的配置方式如下：
3.1 字符串形式
module.exports = {
externals: {
jquery: 'jQuery'
}
};在这个例子中，jquery 模块将通过全局变量 jQuery 来引入。
3.2 对象形式
// www.javascriptcn.com code example
module.exports = {
externals: {
lodash: {
commonjs: 'lodash',
amd: 'lodash',
root: '_'
}
}
};这种配置方式允许你为不同的模块系统指定不同的引入方式。
3.3 函数形式
module.exports = {
externals: function(context, request, callback) {
if (/^lodash/.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}
};通过函数形式，你可以根据请求的模块动态决定是否将其作为外部依赖。
4. 注意事项
- 确保外部依赖可用：使用
externals时，必须确保在运行时环境中这些外部依赖是可用的，否则会导致运行时错误。 - 模块系统的兼容性：在使用
externals时，需要注意模块系统的兼容性，确保外部依赖的引入方式与项目中的模块系统一致。