MiniCssExtractPlugin仅生成CSS文件而不注入HTML，需配合HtmlWebpackPlugin自动插入<link>标签；手写脚本抽离内联样式需用DOM解析器而非正则，且注意作用域、路径、编码等问题。
MiniCssExtractPlugin 只生成 CSS 文件，不自动注入 HTML
Webpack 的 MiniCssExtractPlugin 本身不修改 HTML，也不写入 <link> 标签。它只在构建时把样式从 JS chunk 中剥离，输出到磁盘上的 .css 文件。如果你看到 CSS 文件生成了但页面没生效，大概率是 HTML 里根本没加引用。
必须搭配 HtmlWebpackPlugin（≥ v5.0）并启用 inject: true（默认开启），插件才会自动在 <head> 插入 <link href="main.[hash].css">。手动写 <link> 是危险操作——哈希名会变，硬编码路径必然 404。
-
HtmlWebpackPlugin的template必须指向真实存在的 HTML 文件（如src/index.html），不能是空模板或仅含<div id="app"></div> - 开发环境仍用
style-loader，生产环境才换为MiniCssExtractPlugin.loader；写错顺序或漏切 loader，CSS 就永远进不了提取流程 - loader 链必须是
[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']，MiniCssExtractPlugin.loader是“触发器”，不是功能替代品
手写脚本抽离内联 style 标签的坑与边界
正则 const regCss = /<style>[\s\S]*<\/style>/ 看似简单，实际容易匹配失败或截断：遇到 <style type="text/css"> 或带 scoped、media 属性的标签就失效；多处 <style> 时 exec() 只返回第一个，replace() 默认也只替换首处。
真正可用的提取逻辑要分三步：先用 match() 找出所有 <style>...</style> 片段，再逐个去掉标签头尾，最后合并或按顺序写入不同文件。若 HTML 含 CDATA、注释或嵌套 <script>，正则更不可靠——此时应改用 jsdom 或 cheerio 解析 DOM。
立即学习“前端免费学习笔记（深入）”；
- 不要用
fs.readFile+ 同步正则处理大文件，Node.js 单次读取几百 KB 以上 HTML 容易内存溢出 - 提取后生成的 CSS 文件需检查字符编码，UTF-8 BOM 会导致部分浏览器解析异常
- 内联样式里的相对路径（如
url(./img.png)）移到外部文件后路径基准变了，需手动修正或统一改为绝对路径
为什么不用 Webpack 却要自己抽离？场景决定工具选型
Webpack 方案适合构建时已知样式来源的工程化项目；而手写脚本抽离适用于：遗留静态页改造、CMS 输出页清洗、自动化文档预处理等“一次过”任务。两者不是替代关系，而是分工明确。
例如，某客户交付的 HTML 报告含 200+ 个内联 <style>，要求转成标准外链结构供后续 PDF 渲染使用。这时跑一遍 Node 脚本比配 Webpack 更快——无需装依赖、不改目录结构、不引入构建概念，直接产出 clean HTML + css/ 目录。
- 小型项目或单页应用，手动复制粘贴
<style>内容到 .css 文件仍是最快方式，别为省 30 秒去搭整套工具链 - 若 HTML 由服务端模板（如 EJS、Thymeleaf）动态生成，抽离脚本需运行在服务端渲染后、响应发出前，而非构建阶段
- 注意内联样式优先级高于外链 CSS，抽离后可能视觉回归，务必在浏览器中验证最终效果
HTML 中的 style 标签抽离后，class 和 ID 仍有效吗？
有效，但前提是 HTML 结构未动、CSS 选择器未因作用域变化失效。比如原 <div class="btn">点击</div><style>.btn{color:red}</style> 抽成外链后，只要 .btn 没被其他样式覆盖，颜色照常生效。
真正容易出问题的是：<style scoped>（Vue）、<style jsx>（Next.js）这类带作用域的内联样式，它们依赖编译时注入的唯一属性（如 data-v-xxx）。抽离成普通 CSS 后，选择器失去作用域约束，可能污染全局样式。
- 带
scoped的<style>不建议直接抽离，应走对应框架的构建流程导出 CSS - 含
@import或@charset的内联样式，抽离后需确保这些规则仍在 CSS 文件顶部，否则解析失败 - 抽离后的 CSS 文件名若含中文或空格，某些旧版服务器会拒绝提供，建议统一用 kebab-case 命名
