webpack 用 externals 排除基础库本质是让其不进 bundle、改由 cdn 提供，需同步实现三件事：webpack 跳过打包、cdn 脚本提前挂全局变量、代码中 import 照常使用；key 必须与 import 名一致，value 是 cdn 挂载到 window 的变量名，如 vue: 'vue' 对应 import vue from 'vue'；cdn 脚本须手动引入且顺序在主 js 前；vue cli 配置需写在 configurewebpack 中，ts 项目需补类型声明；常见坑包括 esm cdn 不挂全局变量、脚本位置错、全局变量名大小写错误及 hmr 干扰。
Webpack 用 externals 排除基础库（如 Vue、React、jQuery、Lodash 等），本质是让这些库不进 bundle，改由 CDN 提供——既减体积，又利用浏览器缓存和并行加载优势。关键不在“怎么写配置”，而在于三件事同步到位：Webpack 跳过打包、CDN 脚本提前挂全局变量、代码里 import 仍可照常写。
externals 的 key 和 value 怎么对应
key 必须和你 import 或 require 时写的模块名完全一致；value 是该库通过 CDN 加载后挂在 window 上的变量名。
-
vue: 'Vue'→ 对应import Vue from 'vue'，CDN 必须暴露window.Vue -
'vue-router': 'VueRouter'→ 对应import VueRouter from 'vue-router' -
axios: 'axios'→ 对应import axios from 'axios'，多数 Axios CDN 直接挂window.axios -
lodash: '_'→ 对应import _ from 'lodash'，注意不是lodash，因为官方 UMD 版本挂的是window._ - 如果库导出为默认对象（如某些 ESM CDN），可用对象写法：
echarts: { root: 'echarts', commonjs: 'echarts', commonjs2: 'echarts' }
CDN 脚本必须手动加，且顺序不能错
Webpack 不管加载，只负责跳过打包。你得在 public/index.html 的 或 顶部引入对应 script，并确保它在你的主 JS 执行前就执行完、挂好变量。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 推荐用完整版 CDN（非 .mjs、非
type="module"），例如：<script src="https://unpkg.com/vue@2.6.14/dist/vue.runtime.min.js"></script> - CSS 类资源（如 Element UI 样式）也要单独加 link：
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet"> - 可在浏览器控制台直接输入
Vue、axios验证是否已存在
Vue CLI 或 TypeScript 项目要特别注意位置和类型
如果你用 Vue CLI（v4/v5），externals 必须写在 vue.config.js 的 configureWebpack 里，不能塞进 chainWebpack 插件链，否则无效。
- 示例配置：
module.exports = { configureWebpack: { externals: { vue: 'Vue', 'element-ui': 'ELEMENT' } } }; - TypeScript 项目还需补类型声明，否则编译报错。新建
src/declares.d.ts，写：declare const Vue: any;<br>declare const ELEMENT: any;
- 或者安装
@types/vue后用declare global扩展，确保tsconfig.json的"types"包含该文件
常见踩坑点
很多问题不是配置错，而是环境没对齐：
- 用了 ESM 版本 CDN（带
type="module"），它不会自动挂全局变量 → 换成传统 script - CDN 脚本放在了主 bundle 之后 → 浏览器执行到
import Vue时window.Vue还没定义 - Element UI 的全局变量名是
ELEMENT（全大写），不是ElementUI或elementUI→ 查 CDN 源码或官网文档确认 - 本地开发时误启用了 HMR，但 externals 在 dev 模式下可能未生效 → 建议先 build 验证效果
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
