minicssextractplugin.loader不能替代style-loader，因它仅在生产环境提取css生成独立文件，开发时无样式注入逻辑；必须按node_env条件切换loader、严格配置publicpath与filename，并通过splitchunks解决顺序警告。
MiniCssExtractPlugin 不是“把 CSS 从 JS 里抽出来就行”，而是必须配合 loader 替换、环境区分和路径控制，否则会白配甚至报错。
为什么 MiniCssExtractPlugin.loader 不能直接替代 style-loader？
它只在生产环境起作用，且不支持 JS 运行时插入 style 标签——开发时用它会导致样式完全不生效。
- 开发阶段必须用
style-loader（热重载依赖它）或显式判断环境切换 loader -
MiniCssExtractPlugin.loader是个“编译期提取器”，本质是把 CSS 内容写入 chunk，再由插件生成独立文件，不是运行时加载器 - 如果误在
devServer环境下启用它，控制台不会报错，但页面空白或无样式——因为没有实际插入逻辑
如何正确配置 use 链并避免 HMR 失效？
loader 顺序和条件判断必须严格对齐构建模式，否则热更新中断、CSS 重复注入或路径错乱。
- 始终用
process.env.NODE_ENV === 'production'做 loader 分支，不要依赖mode字段自动推断（Webpack 5+ 的mode不影响 loader 行为） - 推荐写法：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader'] - 如果用了
css-loader的importLoaders或modules，确保它在MiniCssExtractPlugin.loader之后——顺序反了会解析失败 - 开启 HMR 后，
style-loader的injectType: 'singleton'可避免重复<style></style>标签，但MiniCssExtractPlugin下无需关心这个
publicPath 和 filename 配置不当会导致什么？
CSS 文件能生成，但里面的 url(./img.png) 加载 404，或者 HTML 中 <link href="main.css"> 路径错位，根源几乎都在这两项。
-
filename默认是[name].css，但若入口 chunk 名含 hash（如main.a1b2c3.css），必须同步设置output.publicPath或插件级publicPath，否则 CSS 内部资源引用会相对于 HTML 路径解析失败 - 部署到子目录（如
/app/）时，MiniCssExtractPlugin的publicPath选项比 Webpackoutput.publicPath更优先，且只影响它生成的 CSS 中的资源路径 - 示例：部署在
https://cdn.example.com/v2/，应设new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', publicPath: 'https://cdn.example.com/v2/' })
为什么 CSS 加载顺序警告（Conflicting order）不能简单 ignore？
这不是警告，是潜在样式覆盖错误的信号。尤其在多入口、动态 import 或 CSS Modules 场景下，ignoreOrder: true 只是掩耳盗铃。
- 真实原因是多个 chunk 引入了同一份 CSS（比如
a.js和b.js都import 'common.css'），而插件按 chunk 提取，导致两个 CSS 文件都含相同规则 - 解决方式不是关警告，而是用
optimization.splitChunks.cacheGroups把公共 CSS 单独抽成vendor.css，再通过runtimeChunk控制加载时机 - 若用 CSS Modules，确保
css-loader的modules配置一致（如都启用了namedExport），否则模块名冲突也会触发顺序警告
<link> 标签由 HtmlWebpackPlugin 注入，但它的 inject 逻辑默认不感知 MiniCssExtractPlugin 生成的文件名哈希——必须配 filename: '[name].[contenthash:8].css' 并启用 HtmlWebpackPlugin 的 hash: true，否则缓存失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
