minicssextractplugin是唯一可行的css拆分方案，因其能在构建阶段将css提取为独立文件并通过注入html，而style-loader仅支持运行时内联；它不处理按需引入，后者依赖import位置与splitchunks.chunks: 'all'配置。
不能只靠插件开关，必须同时满足三件事：用 MiniCssExtractPlugin 拆出独立 CSS 文件、在 JS 中把 import './xxx.css' 写在异步加载点内部、配置 splitChunks.chunks: 'all' 让 CSS 模块参与公共抽取。
为什么 MiniCssExtractPlugin 是唯一可行的 CSS 拆分方案
Webpack 默认用 style-loader 把 CSS 打包进 JS 并运行时注入 <style></style> 标签，根本不会生成 .css 文件。只有 MiniCssExtractPlugin 能在构建阶段提取样式并输出独立文件，再通过 <link> 注入 HTML。它不处理“按需”，只负责“拆分”——这点常被误解。
- 开发环境必须禁用它，否则热更新失效、页面白屏；应动态切换 loader：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'] - 若用 SCSS/LESS，
MiniCssExtractPlugin.loader必须放在use数组最右（即执行顺序最先），且所有样式类型规则都要覆盖 - 它不压缩 CSS，需额外配
css-minimizer-webpack-plugin
按需引入的关键不在插件，而在 import 位置
CSS 是否“按需”，完全取决于它被 import 进哪个 JS chunk。Webpack 不会自动把组件样式和组件 JS 绑定在一起——你得手动写对位置。
- 写在入口文件顶部：
import './base.css'→ 进main.jschunk → 首屏必载 - 写在
React.lazy加载的组件内部：import './Chart.css'→ 和Chart.js一起被打包进同一个异步 chunk → 只有路由访问时才下载 - 错误做法：在通用工具函数里
import './button.css'→ 提前打进utils.jschunk，彻底失去按需意义
splitChunks 对 CSS 生效的前提和配置要点
splitChunks 默认只处理 JS，CSS 模块必须先被 MiniCssExtractPlugin 识别为独立资源，才能参与分割。
- 必须设
chunks: 'all'，否则async（默认值）会跳过同步 CSS chunk - CSS 文件会被归入
cacheGroups，例如匹配/\.css$/的规则可单独命名、设minSize和minChunks - 若同一份 CSS 被两个异步组件分别
import，且满足minChunks: 2，就会抽成公共common.css；否则仍留在各自 chunk 中 - 注意
Conflicting order警告：多个 chunk 以不同顺序引入同一 CSS，最终样式顺序不可控，不能简单加ignoreOrder: true掩盖
publicPath 错误会导致 CSS 内部资源全部 404
MiniCssExtractPlugin 的 publicPath 控制的是 CSS 文件里 url(./img.png) 这类路径的解析基准，不是 HTML 中 <link> 的路径。它优先级高于 output.publicPath，更推荐显式传入。
- 部署到子目录（如
/admin/）却没设publicPath: '/admin/'→ 图片请求变成/img/logo.png而非/admin/img/logo.png - 用 CDN（如
https://cdn.example.com/v3/）但output.publicPath没同步 → 字体文件返回 404 - 常见误配：
MiniCssExtractPlugin.loader的options.publicPath设成相对路径（如'../'），在嵌套层级深的 CSS 中容易错位
最容易被忽略的是：CSS 拆分和按需是两层动作，缺一不可。很多人配了 MiniCssExtractPlugin 就以为“已按需”，结果所有样式仍在 main.css 里首屏加载完——问题一定出在 import 位置或 splitChunks 未启用 all 模式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
