typescript项目中webpack配置externals需两步：一是通过externals键值对跳过打包并映射全局变量，如{vue: 'vue'}；二是手动引入cdn脚本并补充类型声明。
在 TypeScript 项目中用 Webpack 配置 externals 排除 CDN 依赖，核心是两件事：一是告诉 Webpack “别打包这个库”，二是确保它运行时能从全局（如 window）正确取到变量。TypeScript 本身不参与打包逻辑，但会影响类型检查和导入写法，需额外注意类型声明。
明确 externals 的 key 和 value
externals 的 key 必须和你代码里 import 或 require 的模块名完全一致；value 是该库通过 CDN 加载后挂载到全局的变量名（通常是大驼峰或全大写）。
- 比如用
import Vue from 'vue'→externals: { vue: 'Vue' } - 用
import ElementUI from 'element-ui'→ 查 CDN 脚本源码，发现它赋值给window.ELEMENT→ 写成'element-ui': 'ELEMENT' - 用
import * as _ from 'lodash'→ CDN 挂的是lodash全局变量 →lodash: 'lodash'
CDN 资源必须提前加载并暴露全局变量
Webpack 不会帮你加载 CDN 脚本，只负责“跳过打包”。你得手动在 public/index.html 的 或 底部引入对应 script 标签，且顺序要在你的主 bundle 之前。
- 推荐用完整版 CDN（非模块化），例如：
<script src="https://unpkg.com/vue@2.6.14/dist/vue.runtime.min.js"></script> - 避免使用 ESM 版本（如
.mjs或带type="module"的 script），它们不会自动挂全局变量 - 可通过浏览器控制台输入变量名（如
Vue、axios）验证是否已存在
TypeScript 类型支持不能丢
排除打包后，TypeScript 编译器仍会检查 import 语句，但实际运行时变量来自全局。你需要补充类型声明，否则会报 Cannot find module 'xxx' 或 xxx is not defined。
- 新建
src/declares.d.ts，添加：declare const Vue: any;<br>declare const axios: any;<br>declare const ELEMENT: any;
- 或者安装对应 @types 包（如
@types/vue），再配合declare global扩展：declare global {<br> const Vue: typeof import('vue');<br>} - 确保
tsconfig.json的"types"或"typeRoots"包含声明文件路径
Vue CLI 项目要配在 configureWebpack 下
如果你用 Vue CLI（v4/v5），externals 必须写在 vue.config.js 的 configureWebpack 里，不能塞进 chainWebpack 的插件链——否则无效。
- 示例：
module.exports = {<br> configureWebpack: {<br> externals: {<br> vue: 'Vue',<br> 'vue-router': 'VueRouter',<br> axios: 'axios'<br> }<br> }<br>}; - 注意：TypeScript 文件里仍可写
import Vue from 'vue'，Webpack 会把它转成对window.Vue的引用
