一：定义

Webpack 中的 ‌externals‌ 是用于在打包时排除指定依赖项的关键配置项，旨在减小最终产物的体积并优化构建性能

二：作用

1：排除依赖=>通过 externals 声明不打包的模块，这些依赖需在运行时从外部环境获取

2：优化构建=>减少打包文件体积，提升构建速度，尤其适用于体积较大的第三方库

三：语法

1：基础形式

// webpack.config.js
module.exports = {
  externals: {
    // key: 包名（与 package.json 中的 dependencies 一致）
    // value: 运行时对应的全局变量名或模块规范
    jquery: 'jQuery',      // 全局变量形式
    lodash: '_',           // 全局变量形式
    vue: 'Vue'             // 全局变量形式
  }
};

2：多环境支持

externals: {
  lodash: {
    commonjs: 'lodash',  // CommonJS 环境
    amd: 'lodash',       // AMD 环境
    root: '_'            // 全局变量形式（通过 script 标签引入）
  }
}

3：直接引入CDN资源

externals: {
  jquery: ['https://cdn.example.com/jquery.js', '$'],
  vue: ['https://cdn.example.com/vue.js', 'Vue']
},
externalsType: 'script'

四：场景

1：大型第三方库优化

2：库/组件开发

五：代码

1：配置配置 externals
// webpack.config.js
externals: {
  vue: 'Vue',
  'element-ui': 'ELEMENT'
}

2：HTML 引入 CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>

3：项目使用
import Vue from 'vue';
import ElementUI from 'element-ui';