webpack 中的 externals 配置提供了「不从 bundle 中引用依赖」的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。 此选项通常适用于 library 开发人员，但应用程序开发人员也可以充分利用此功能。
externals
string regex function array object
防止将某些 import 包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展包(external package)。
例如，从 CDN 引入 jQuery，而不是把它打包：
index.html
... ...
webpack.config.js
externals: {
jquery: 'jQuery'
}
这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：
import $ from 'jquery';
$('.my-element').animate(...);
>> 用户(consumer)，在这里是指任何用户应用程序终端(end user application)，并且包含了使用 webpack 打包的 library。
有外部依赖(external dependency)的 bundle 能在多种模块上下文(module context)（大体上分为 CommonJS, AMD, 全局变量和 ES2015 模块）中使用。外部 library 可以是上述任何的模块形式，但是必须在不同变量下。
externals 支持以下模块上下文(module context)
- global – 外部 library 能够作为全局变量使用。用户可以通过在 script 标签中引入来实现。这是 externals 的默认设置。
- commonjs – 用户(consumer)应用程序可能使用 CommonJS 模块系统，因此外部 library 应该使用 CommonJS 模块系统，并且应该是一个 CommonJS 模块。
- commonjs2 – 类似上面几行，但导出的是 module.exports.default。
- amd – 类似上面几行，但使用 AMD 模块系统。
externals 接受各种语法，并且按照不同方式去解释他们。
string
externals 中的 jQuery，表示你的 bundle 需要访问全局形式的 jQuery 变量。
array
externals: {
subtract: ['./math', 'subtract']
}
subtract: ['./math', 'subtract'] 转换为父子结构，其中 ./math 是父模块，而 bundle 只引用 subtract 变量下的子集。
object
externals : {
react: 'react'
}
// 或者
externals : {
lodash : {
commonjs: "lodash",
amd: "lodash",
root: "_" // indicates global variable
}
}
此语法用于描述所有外部 library 可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问，但在全局变量形式下用 _ 访问。
function
It might be useful to define your own function to control the behavior of what you want to externalize from webpack. webpack-node-externals, for example, excludes all modules from the node_modules and provides some options to, for example, whitelist packages.
It basically comes down to this:
externals: [
function(context, request, callback) {
if (/^yourregex$/.test(request)){
return callback(null, 'commonjs ' + request);
}
callback();
}
],
The ‘commonjs ‘ + request defines the type of module that needs to be externalized.
regex
>> TODO – I think its overkill to list externals as regex.
关于如何使用此 externals 配置的更多信息，请参考如何编写 library。
原文：https://webpack.js.org/configuration/externals/
上一篇: Watch 和 WatchOptions 下一篇: Node