webpack 配置 externals 与 html-webpack-externals-plugin 协同实现 cdn 加载：先通过 externals 跳过指定模块打包并依赖全局变量，再由插件自动注入对应 cdn script 标签，确保 import 语法不变、运行时变量可用。
Webpack 中配置 externals 并结合 html-webpack-tags-plugin 动态插入 CDN 资源，核心在于两步协同：一是告诉 Webpack “哪些模块不要打包”，二是让 HTML 插件自动注入对应 CDN 的 <script></script> 标签。注意：你提到的 html-webpack-tags-plugin 并非主流插件，实际广泛使用且功能匹配的是 html-webpack-externals-plugin（已验证兼容 Webpack 4/5），而 html-webpack-tags-plugin 官方文档稀少、维护停滞，容易导致构建失败或标签缺失。以下按实际可行方案说明。
明确 externals 配置规则
externals 的作用是让 Webpack 在打包时跳过指定模块，但保留代码中 import 或 require 的写法不变。它依赖外部环境提供同名全局变量。
- key 是你在 JS 中 import 的包名（如
'vue'、'axios'） - value 是该库挂载到
window上的全局变量名（如'Vue'、'axios'），默认为root模式（即全局变量） - 必须确保 CDN 加载的脚本确实暴露了这个变量，比如
https://unpkg.com/vue@2.6.14/dist/vue.runtime.min.js暴露的是Vue，不是vue
用 html-webpack-externals-plugin 自动注入 CDN
这是目前最稳定、社区验证过的方案，替代手动在 index.html 写 <script></script> 标签。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 安装插件：
npm install html-webpack-externals-plugin --save-dev - 在 webpack 配置（如
webpack.prod.conf.js）中引入并使用：
module.exports = {
plugins: [
new HtmlWebpackExternalsPlugin({
externals: [
{ module: 'vue', entry: 'https://unpkg.com/vue@2.6.14/dist/vue.runtime.min.js', global: 'Vue' },
{ module: 'axios', entry: 'https://unpkg.com/axios@1.6.7/dist/axios.min.js', global: 'axios' }
]
})
]
};
构建后，插件会自动在生成的 index.html 的 或 底部插入对应 <script src="..."></script> 标签，顺序与数组一致。
确保 JS 代码写法兼容 externals
配置完 externals 后，代码中仍可正常使用 ES Module 语法，无需改写：
import Vue from 'vue';import axios from 'axios';
new Vue({ el: '#app', data: { msg: 'Hello' } });
axios.get('/api/user').then(...);
Webpack 打包时会把 import Vue from 'vue' 编译成类似 var Vue = window.Vue 的逻辑，因此只要 CDN 脚本先加载、全局变量存在，运行就无问题。
验证与调试要点
- 打开浏览器开发者工具 → Network 标签，确认 CDN 脚本返回状态码 200，且加载顺序早于你的 bundle JS
- 在 Console 中直接输入
Vue或axios，应返回构造函数或对象，否则说明 CDN 未正确暴露变量 - 检查构建产物 bundle 文件大小，对比配置前后
vendor或主 chunk 是否明显减小（如移除 Vue 可减少 ~80KB） - 若使用 Vue CLI 项目，需在
vue.config.js中通过configureWebpack或chainWebpack注入插件和 externals，而非直接修改内部 webpack 配置文件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
