开发时页面白屏是因为MiniCssExtractPlugin.loader不能写死在use中，必须用process.env.NODE_ENV动态切换为style-loader；publicPath配置错误会导致CSS中url资源404；Conflicting order警告需收敛引入点而非忽略。
开发时页面白屏？MiniCssExtractPlugin.loader不能写死在use里
Webpack 5 中 MiniCssExtractPlugin.loader 在开发阶段不注入样式，只参与构建时提取。如果在 module.rules 里直接写死它，webpack serve 启动后 DOM 里既没有 <style>，也没有 <link>，页面必然白屏。
必须用环境变量动态切换 loader：
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader']- 别依赖 Webpack 的
mode字段——它对 loader 行为完全没影响 -
style-loader推荐用 v3.3.0+；旧版 v2.x 在 Webpack 5 下会丢掉insert函数，导致 HMR 失效 - 如想避免重复插入
<style>标签，可加配置：{ injectType: 'singleton' }
CSS 里的 url(./logo.svg) 404？publicPath 没配对
MiniCssExtractPlugin 的 publicPath 决定 CSS 文件内部相对路径（如 url(./img.png)）如何解析，和 output.publicPath 是两回事，且前者优先级更高。CSS 文件能生成，但资源加载失败，90% 是因为这个值没设对。
常见部署场景对应写法：
立即学习“前端免费学习笔记（深入）”；
- 部署到子目录（如
/app/）：new MiniCssExtractPlugin({ publicPath: '/app/' }) - 走 CDN（如
https://cdn.example.com/v2/）：new MiniCssExtractPlugin({ publicPath: 'https://cdn.example.com/v2/' }) - 根目录部署（
/）也建议显式写：publicPath: '/'，避免隐式行为差异
出现 Conflicting order 警告？别急着开 ignoreOrder: true
这个警告不是“警告而已”，是多个模块以不同顺序 import 同一个 CSS 文件（比如 A → B → common.css，同时 C → common.css），最终生成的 CSS 规则顺序不确定，容易引发样式覆盖 bug。
解决思路是收敛引入点：
- 检查是否有多处
import './common.css'，尤其在跨 chunk 场景下 - 把公共样式提到入口文件统一引入
- 或用
splitChunks.chunks: 'all'+cacheGroups归并到同一 CSS chunk -
ignoreOrder: true只应在确认无样式冲突风险时临时启用，不是长期解法
CSS 文件没压缩？css-minimizer-webpack-plugin 没进 optimization.minimizer
Webpack 5 默认不压缩 CSS，哪怕你已设 mode: "production"、用了 MiniCssExtractPlugin 提取样式，最终生成的 .css 文件仍是明文。
插件必须放在 optimization.minimizer 数组里，写进 plugins 字段会被完全忽略：
- 只装插件不够，必须搭配
MiniCssExtractPlugin：它负责抽成独立文件；没这一步，压缩插件连目标都找不到 - 若项目仍用
style-loader注入<style>，那压根没生成.css文件，插件自然跳过 -
optimization.minimize被手动设为false会直接禁用所有 minimizer，包括这个插件 -
MiniCssExtractPlugin.loader必须放在use数组第一位，否则 CSS 不会被提取
loader 正确顺序示例：MiniCssExtractPlugin.loader → css-loader → postcss-loader → sass-loader。如果 postcss-loader 放在 MiniCssExtractPlugin.loader 后面，PostCSS 规则（比如 @layer、嵌套）可能被跳过，压缩后样式异常。
