MiniCssExtractPlugin.loader与style-loader不能混用，因前者是生产环境CSS提取器（生成<link>），后者是开发环境注入器（插入<style>），功能互斥；必须通过process.env.NODE_ENV动态切换loader，否则导致HMR失效、样式不渲染或白屏。
css-loader 和 MiniCssExtractPlugin.loader 为什么不能混用
因为它们根本不是同一类工具：前者是解析器，后者是提取器。MiniCssExtractPlugin.loader 只在生产构建时把 CSS 写入文件并生成 <link> 标签；style-loader 则是在开发时把 CSS 注入 <style> 标签实现热更新。两者同时出现在 use 数组里，Webpack 会尝试按顺序执行，但 MiniCssExtractPlugin.loader 在开发环境下不提供运行时注入能力，直接导致样式不渲染、HMR 失效，甚至报错 Cannot use [MiniCssExtractPlugin] plugin as it provides no runtime。
如何根据环境动态切换 loader
必须用 process.env.NODE_ENV === 'production' 做判断，不能依赖 Webpack 的 mode 字段——它对 loader 行为无影响。常见错误是硬编码 MiniCssExtractPlugin.loader 或引入未定义的 isProduction 变量。
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader']- 确保
css-loader在style-loader左侧（即数组靠后位置），否则style-loader收到原始字符串会报Cannot read property 'toString' of undefined - 开发环境务必用
style-loader@3.3.0+，旧版 v2.x 不兼容 Webpack 5 的 ModuleGraph API，会丢掉insert函数
MiniCssExtractPlugin 输出重复 CSS 文件怎么修
现象是多个异步 chunk 都输出了内容完全相同的 main.css，根源在于 chunkFilename 没带哈希。Webpack 无法识别“内容相同”，就每个 chunk 都写一份。
- ✅ 正确配置：
new MiniCssExtractPlugin({ chunkFilename: '[name].[contenthash:8].css' }) - ❌ 错误写法：
chunkFilename: '[name].css'或在splitChunks.cacheGroups里给 CSS 单独配name，这会覆盖 contenthash 行为 - 别忘了加
css-minimizer-webpack-plugin到optimization.minimizer，否则提取出的 CSS 是未压缩的原始文本，体积可能比源文件还大
为什么 CSS 里的图片路径 404
不是 file-loader 或 url-loader 没配好，而是 MiniCssExtractPlugin 的 publicPath 没设对。CSS 中的 url(./logo.png) 是相对路径，解析基准由插件的 publicPath 决定，而非 Webpack 的 output.publicPath。
立即学习“前端免费学习笔记（深入）”；
- 部署到子目录（如
/app/）时，必须显式传入：new MiniCssExtractPlugin({ publicPath: '/app/' }) - 用 CDN 时同理：
publicPath: 'https://cdn.example.com/v2/' - 漏掉这个配置，CSS 文件能生成，但所有
url()引用的资源都会 404
publicPath 的作用域和 contenthash 的生效前提——它只在 chunkFilename 里起作用，且必须避开 cacheGroups 的命名干扰。这两处一错，打包看起来成功，线上却全是白屏或断链。 
