开发时页面白屏是因为硬编码minicssextractplugin.loader，它在开发阶段不注入样式，必须用process.env.node_env==='production'动态切换为style-loader；publicpath配错导致css中url资源404；conflicting order警告需收敛css引入点而非忽略ignoreorder。
开发时页面白屏？一定是 MiniCssExtractPlugin.loader 写死了
MiniCssExtractPlugin.loader 在开发阶段不注入任何样式，只参与构建时提取。硬编码在 module.rules 里，webpack serve 启动后 DOM 里既没 <style></style> 也没 <link>，页面必然白屏。
- 必须用环境变量动态切换：用
process.env.NODE_ENV === 'production'判断，别信mode字段——它对 loader 行为零影响 - 开发推荐
style-loader@3.3.0+，旧版 v2.x 在 Webpack 5 下会丢掉insert函数，导致 HMR 失效 - 如需避免热更新时重复插入
<style></style>标签，可加配置{ injectType: 'singleton' }
CSS 里的 url(./img.png) 404？查 MiniCssExtractPlugin 的 publicPath
MiniCssExtractPlugin 的 publicPath 控制 CSS 内部相对路径（如 url(./logo.svg)）的解析基准，和 output.publicPath 是两回事，且前者优先级更高。配错就全 404。
- 部署到子目录（如
/admin/）：传publicPath: '/admin/' - 走 CDN（如
https://cdn.example.com/v2/）：传publicPath: 'https://cdn.example.com/v2/' - 根目录部署也建议显式写
publicPath: '/'，避免隐式行为差异
出现 Conflicting order 警告？别开 ignoreOrder
这个警告不是“提示”，是真实风险信号：多个模块以不同顺序 import 同一个 CSS 文件（比如 A→B→common.css，同时 C→common.css），最终生成的 CSS 规则顺序不确定，上线后极易引发样式覆盖 bug。
- 根本解法是收敛引入点：公共 CSS 统一在入口 JS（如
index.js）顶部引入，禁止分散import - 若必须跨 chunk 复用，启用
splitChunks.chunks: 'all'并配cacheGroups把它们归并到同一个 CSS chunk -
ignoreOrder: true只应在确认无样式冲突、且临时上线时使用，长期开启等于放弃样式顺序保障
CSS 不压缩？css-minimizer-webpack-plugin 没进 minimizer 数组
Webpack 5 默认不压缩 CSS，哪怕开了 mode: "production"、用了 MiniCssExtractPlugin，生成的 .css 文件仍是明文——这是最常被忽略的前提。
-
css-minimizer-webpack-plugin必须放在optimization.minimizer数组里，写进plugins字段会被完全忽略 - 必须搭配
MiniCssExtractPlugin：它负责抽离独立文件；没这一步，插件连目标都找不到 - loader 顺序必须是
MiniCssExtractPlugin.loader → css-loader → postcss-loader → sass-loader，否则 PostCSS 规则可能被跳过 - 要保留 sourcemap，得同时设
sourcemap: true（切回 cssnano）、postcss-loader的sourceMap: true，并关掉postcss.config.js里的 cssnano
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
