html-inline-css-webpack-plugin不生效需检查：必须在html-webpack-plugin之后注册，禁用mini-css-extract-plugin，确保webpack版本兼容，且css文件名正则匹配准确（如/.(js|css)$/）。
html-inline-css-webpack-plugin 安装后不生效？检查插件是否被正确注册
这个插件必须在 html-webpack-plugin 之后运行，且不能和 mini-css-extract-plugin 冲突——后者会把 CSS 提取成独立文件，导致内联无源可依。
常见错误现象：dist/index.html 中依然只有 <link rel="stylesheet" href="main.css">，没变成 <style>...</style>。
- 确保
html-webpack-plugin已安装并启用（它是前提，不是可选） - 插件实例顺序必须是：先
HtmlWebpackPlugin，再HTMLInlineCSSWebpackPlugin - 禁用或移除
mini-css-extract-plugin，否则 CSS 不会进入 HTML 编译流程 - Webpack 5+ 用户注意：该插件未适配 Webpack 5 的新 API，推荐改用更活跃的替代方案（见下一条）
html-webpack-inline-source-plugin 更可靠，但 inlineSource 正则要写准
html-webpack-inline-source-plugin 是目前兼容性更好、维护更积极的选择，它直接挂钩 html-webpack-plugin 的 inlineSource 选项，逻辑更清晰。
关键点在于正则匹配必须覆盖你实际生成的 CSS 文件名：
- 默认配置
inlineSource: '.(js|css)$'只匹配以.js或.css结尾的资源，但 Webpack 5 默认输出的 CSS 文件可能带 hash，如main.abc123.css—— 这个正则就失效了 - 应改为
inlineSource: '\.(js|css)$'（注意双反斜杠转义），或更稳妥地用inlineSource: /\.(js|css)$/ - 必须确保
HtmlWebpackPlugin实例中设置了inlineSource，否则插件不触发 - 该插件不处理
@import嵌套的 CSS，只内联最终打包出的产物文件
style-ext-html-webpack-plugin 支持 inline: true，但仅限 style 标签
如果你只需要把 CSS 内联为 <style></style> 块（而非 <link>），style-ext-html-webpack-plugin 是最轻量的选择，且明确支持 inline: true 配置。
但它有明确限制：
- 只处理
<style></style>标签内容，对<link rel="stylesheet">无效 - 不会读取外部 CSS 文件，只作用于模板中已存在的
<style></style>块（适合 CSS-in-JS 或服务端渲染场景） - 若你用
css-loader+style-loader，它能捕获运行时注入的样式；但若用mini-css-extract-plugin，它就完全不工作 - 不压缩 CSS，如需压缩，得额外配
minify: { removeComments: true }给html-webpack-plugin
为什么 inline 后页面白屏或样式错乱？检查 CSS 加载时机
CSS 内联后变成 <style></style>，看似更快，但容易引发两个隐藏问题：
- CSS 体积过大时，阻塞 HTML 解析，反而拖慢首屏渲染（特别是移动端）
- 如果内联的 CSS 包含字体、图片等相对路径资源，而 HTML 输出路径与资源路径不一致，
url(...)会 404 - 某些 CSS-in-JS 库（如
styled-components）生成的样式依赖 JS 执行，若 JS 还没加载完，内联的<style></style>可能被提前清除或覆盖 - 多页面共用同一份内联 CSS 时，注意避免 class 名冲突或重复插入（建议配合
chunks选项按入口粒度控制）
真正需要内联的，通常是首屏关键 CSS（Critical CSS），而不是整个 bundle；全自动内联往往得不偿失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
