Webpack默认不识别CSS文件，必须配置css-loader解析@import/url()并转为JS模块，style-loader再注入<style>标签；顺序颠倒会导致路径解析失败，开发用['style-loader','css-loader']，生产换MiniCssExtractPlugin.loader。
Webpack 默认根本不认识 .css 文件，直接 import './index.css' 就会报 Module parse failed: Unexpected token —— 不是你的 CSS 写错了，是 Webpack 根本没配解析规则。
loader 顺序写反了导致 “Can’t resolve './xxx.png'”
错误现象：打包时报 Module not found: Error: Can't resolve './logo.png'，或 Unknown word；CSS 里写了 url(./img.png) 或 @import './base.css'，但 loader 没处理路径。
根本原因：css-loader 负责把 url() 和 @import 解析成模块依赖，style-loader 只负责把最终的 CSS 字符串塞进 <style> 标签。如果顺序颠倒（比如写成 ['css-loader', 'style-loader']），style-loader 会直接拿到原始 CSS 文本去处理，里面的相对路径根本不会被解析，自然找不到文件。
-
use: ['style-loader', 'css-loader']✅ 正确：从右往左执行，先css-loader解析路径，再style-loader注入 - 别用
loader: 'css-loader'单字段写法——它不支持链式调用，没法接style-loader - 用了 Sass/Less？顺序是
['style-loader', 'css-loader', 'sass-loader']，预处理器必须在最右
开发环境误配 MiniCssExtractPlugin 导致 HMR 失效或白屏
错误现象：改完 CSS 页面没反应、控制台报 Cannot use [MiniCssExtractPlugin] plugin as it provides no runtime，甚至页面直接空白。
立即学习“前端免费学习笔记（深入）”；
根本原因：MiniCssExtractPlugin.loader 是为生产环境设计的，它把 CSS 抽成独立文件，不支持热更新（HMR）。开发时若和 style-loader 混在同一 rule 里，或在 mode: 'development' 下启用它，Webpack 会拒绝运行。
- 开发环境只用
['style-loader', 'css-loader']，确保样式实时生效 - 生产环境才换
[MiniCssExtractPlugin.loader, 'css-loader']，并确保插件已正确注册 - 不要在同一个
test: /\.css$/rule 里同时写style-loader和MiniCssExtractPlugin.loader，Webpack 会懵
css-loader 开了 modules 后全局类突然失效
错误现象：.btn { color: red } 写了但没效果，浏览器里 DOM 上的 class 名变成类似 _btn_3vF 的哈希值。
根本原因：css-loader 的 modules: true 是局部作用域模式，它默认只处理 import 引入的 CSS，且会重命名所有类名。HTML 中的 <button class="btn"> 用的是原始类名，根本匹配不到。
- 全局样式（如重置、工具类）单独建
global.css，配独立 rule 并关掉modules - 必须混用时，用
:global(.reset) { margin: 0 }包裹需要透出的类 - 注意
css-loader@6+默认启用modules.auto：只有*.module.css才开模块化，普通.css不受影响
最容易被忽略的一点：Webpack 5 下 style-loader 必须 ≥ v3.3.0，否则 HMR 会崩在 Cannot read property 'insert' of undefined。删掉 node_modules 重装，别信缓存里的旧版本。
