webpack 5 默认不识别.css文件，必须配置['style-loader', 'css-loader']才能正常加载：css-loader先解析@import/url()为模块依赖，style-loader再注入标签；顺序颠倒必报错，生产环境须换minicssextractplugin.loader以避免fouc和缓存问题。
Webpack 5 默认完全不识别 .css 文件，import './index.css' 会直接报 Module parse failed: Unexpected token —— 所以“最佳配置”不是选功能最炫的，而是先让 CSS 能跑起来、不报错、不闪屏、开发热更新正常、生产可缓存。
为什么 ['style-loader', 'css-loader'] 是开发环境唯一可行顺序
Webpack 的 use 数组从右向左执行：css-loader 必须先处理，把 @import、url(./logo.png) 这类语法转成模块依赖；style-loader 再把最终解析出的 CSS 字符串注入 <style></style> 标签。顺序颠倒就会让 style-loader 收到原始 CSS 文本（含未解析的路径），它不处理路径，直接抛 TypeError: Cannot read property 'toString' of undefined 或 Can't resolve './logo.png'。
- 正确写法：
use: ['style-loader', 'css-loader'] - 错误写法：
use: ['css-loader', 'style-loader']（必报错） - 别用单
loader字段，它不支持链式调用，loader: 'css-loader'不会触发style-loader
生产环境必须换掉 style-loader，否则首屏闪白
style-loader 把 CSS 打进 JS bundle，JS 加载完才插入样式，用户会明显看到页面先白屏再渲染（FOUC），且 CSS 无法独立缓存——JS 更新一次，样式也得重下。
- 生产环境改用
MiniCssExtractPlugin.loader，配合css-loader - 必须在
plugins中注册new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }) - 不能和
style-loader混在同一个rule里，否则 HMR 失效或全页刷新 -
MiniCssExtractPlugin.loader在mode: 'development'下直接报错，必须用process.env.NODE_ENV === 'production'动态切换use数组
CSS Modules 开启后类名失效？检查三处硬性约束
CSS Modules 不是全局开关，它只对显式启用的规则生效，且默认只匹配 *.module.css（v6+ 启用 modules.auto）。
- 普通
.css文件默认不开启 Modules，类名仍是全局的 - 想局部化，要么改文件名为
Button.module.css，要么单独配 rule：{ test: /\.module\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }] } - JS 中必须用
import styles from './Button.module.css'，再通过styles.btn访问；import './Button.css'仍走普通流程 -
<link rel="stylesheet">或内联style完全绕过css-loader，不受 Modules 影响
css-loader 的 importLoaders 和图片 404 是高频盲区
importLoaders 控制被 @import 进来的 CSS 文件是否经过前置 loader（比如 postcss-loader）。而图片 404 的根源是：CSS 里的 url('./img/logo.png') 是相对路径，webpack 打包后图片可能被重命名并挪到 dist/img/xxx.abc123.png，但 CSS 里的路径没同步更新。
-
importLoaders: 1表示被@import的文件会经过前 1 个 loader（如postcss-loader） - 图片路径问题不是
css-loader的责任，它只解析路径，不负责打包资源 —— 缺少asset-module或url-loader配置才会导致 404 - 若用了
MiniCssExtractPlugin，确保output.publicPath正确，否则提取后的 CSS 里图片路径会指向错误目录
真正容易被忽略的不是怎么配，而是“什么时候不该配”：比如在开发环境误用 MiniCssExtractPlugin.loader，或以为开了 modules: true 就能自动作用于所有 CSS 文件——实际它只对匹配规则的文件生效，且要求 JS 引入方式、类名访问方式全部同步变更。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
