externals
从输出的bundle中排除依赖的，被externals的依赖，不会被resolve，从用户环境中获取；
设置了以后，import的包，不会被打包到最终的bundle中，运行时，再从外部去获取依赖；设置externals只是修改编译，将原本import的地方，编译成对应的设置后的语法；
目的：剥离不需要改动的模块；
原本使用
原本使用是当项目中，有某个依赖，改动很小，比如jquery，react，react-dom等基础依赖库，可以将它配置到externals中，打包的时候，就不会将其打包到最终的boudle中去，比如，对于普通的jquery来说，如果不设置，会全部打包到最后的dist中去，设置之后，会被打包成这样：
index.js
import jQuery from "jquery";
console.log(jQuery);
webpack：
module.exports = {
mode: 'development',
externals: {
jquery: 'jQuery'
}
};
dist.js文件
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ \"jquery\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);\n\n\nconsole.log((jquery__WEBPACK_IMPORTED_MODULE_0___default()));\n\n//# sourceURL=webpack://webpack-test/./src/index.js?");
/***/ }),
/***/ "jquery":
/*!*************************!*\
!*** external "jQuery" ***!
\*************************/
/***/ ((module) => {
module.exports = jQuery;
/***/ })
对应的webpack
这是最简单的，index.js中只有一句console，我们可以看到，最后一段，编译过后jquery对应的就是全局上的jQuery;
那么全局上的jQuery从哪里来呢？
这里就需要我们手动用script标签在html模板中插入了。
这就是externals基础的用法，展现了它在浏览器中的作用，externals还有很多额外的配置，在使用到的时候，记得翻看文档，贴个地址：
webpack.docschina.org/configurati…
关于配置的tips
实际是对import ** 后面的地址进行配置，webpack遇到了** 匹配的externals，就不会再去查找，而是编译成上面的代码；所以，配置的时候，使用对象：
key：import对应的路径
value：全局上对应挂在的变量（具体查看文档）
配合插件使用
上述的手动添加script标签，但是有插件，可以解决浏览器端手动去添加script标签的问题：
html-webpack-externals-plugin
www.npmjs.com/package/htm…
使用该插件，可以直接省去往模板中插入script标签过程，由plugin来完成；
具体使用可以查看文档；
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'jquery',
entry: 'https://unpkg.com/jquery@3.2.1/dist/jquery.min.js',
global: 'jQuery',
},
],
})
额外需要注意的
externals使用的时候，如果指定了externalsType，那么打包的output.librayTarget的值也应该相同，原因很简单，如果你引入的externalsType是cmd的，那么，你提供出去的output的内容，肯定也是cmd的；
具体应用情况分析
在使用中，我们对externals又有新的发现；
- 传统使用，提取基础库文件到cdn，减小包体积，提高构建速度
- 兼容性使用法：在微应用使用场景中，老的子应用，投到新的子应用，老的主应用，使用antd3.0，新的主应用，使用antd4.0，此时，存在两个不同版本的antd时，新的子应用和老的子应用同时投到新的子应用当中，此时externals能发挥极大的作用，将二者定义为window上的两个不同变量，在子应用打包时候，指定各自的antd对应的externals全局变量，即可完成两个子应用兼容投放在新的主应用上的需求；
