webpack 5 默认不识别.css文件，import './index.css'必报module parse failed；必须配置test: /.css$/规则及use: ['style-loader', 'css-loader']，顺序颠倒或缺失任一环节均导致样式加载失败。
Webpack 5 默认完全不识别 .css 文件，import './index.css' 必然报 Module parse failed: Unexpected token —— 不是配置“好不好”，而是“配不配”决定样式能不能加载。
为什么 import './xxx.css' 直接报错
Webpack 只认 JS 模块，遇到 CSS 就当语法错误扔掉。它不会自动调用 css-loader，必须显式声明规则：匹配 /\.css$/，并指定 use 链。漏掉任意一项都会失败。
- 没装
css-loader或style-loader：执行yarn add --dev css-loader style-loader -
module.rules里没写test: /\.css$/规则：Webpack 根本看不到这个文件 - 写了规则但
use是空数组，或只写了'css-loader'：缺少style-loader，CSS 解析完也不会进页面
loader 顺序必须是 ['style-loader', 'css-loader']
Webpack 的 use 数组从右向左执行：css-loader 先处理 @import 和 url(./logo.png)，把它们转成模块依赖；style-loader 再把最终的纯 CSS 字符串注入 <style></style> 标签。顺序反了，style-loader 收到的是含原始路径的文本，直接报 Cannot read property 'toString' of undefined 或 Can't resolve './logo.png'。
- ✅ 正确：
use: ['style-loader', 'css-loader'] - ❌ 错误：
use: ['css-loader', 'style-loader']或loader: 'css-loader'（单 loader 写法不支持链式） - 加了
postcss-loader或sass-loader？它们得放在css-loader左边：['style-loader', 'css-loader', 'sass-loader']
生产环境不能用 style-loader，必须换 MiniCssExtractPlugin.loader
style-loader 把 CSS 打进 JS bundle，JS 加载完才插样式，首屏白屏（FOUC），且 CSS 无法独立缓存。生产必须抽离为 .css 文件，否则上线就出问题。
- 别和
style-loader混在同一个 rule 里：会 HMR 失效、全页刷新，甚至报Cannot use [MiniCssExtractPlugin] plugin as it provides no runtime - 必须用
process.env.NODE_ENV === 'production'动态切换，不能依赖 Webpack 的mode字段——它对 loader 行为无影响 - 正确写法：
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'] - 记得注册插件：
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })]
图片路径 404 不是 loader 没配好，而是 publicPath 没设对
CSS 里的 url(./logo.png) 是相对路径，解析基准由 MiniCssExtractPlugin 的 publicPath 决定，不是 Webpack 的 output.publicPath。没设或设错，所有图片请求都 404。
- 配置位置：
new MiniCssExtractPlugin({ publicPath: '../' })（根据实际输出目录调整） - 开发环境用
style-loader时不受影响，因为它是 JS 注入，路径由运行时决定 - 如果用了
css-minimizer-webpack-plugin，别忘了加进optimization.minimizer，否则提取出的 CSS 是未压缩的原始文本
最容易被忽略的是 process.env.NODE_ENV 判断逻辑和 publicPath 的作用域——前者写错会导致开发/生产 loader 混用，后者设错会让所有背景图、字体、图标全部失效，而且错误不报在控制台，只体现在网络面板里 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
