style-loader必须在css-loader右侧，因Webpack use数组从右向左执行：css-loader先解析CSS为JS模块，style-loader再注入到head；顺序颠倒会报错。
开发环境直接用 css-loader + style-loader 就够了，但必须注意执行顺序和 mode 匹配——否则样式不生效或热更新失效。
为什么 style-loader 必须在 css-loader 右边？
Webpack 的 use 数组从右向左执行：css-loader 先把 .css 解析成 JS 模块（处理 @import、url()），再交给 style-loader 把这段 JS 里的 CSS 注入到 <head> 里生成 <style> 标签。如果顺序反了，style-loader 会尝试处理原始 CSS 字符串，直接报错。
- 正确写法：
use: ['style-loader', 'css-loader'] - 错误写法：
use: ['css-loader', 'style-loader']→ 报Module parse failed: Unexpected token - 开发模式下不能用
MiniCssExtractPlugin.loader，它只兼容mode: 'production'
css-loader 默认不启用 CSS Modules，怎么开？
如果你 import 的是 import styles from './Button.module.css' 这类文件，不显式开启 modules 选项，css-loader 会把它当普通 CSS 处理，类名不会哈希化，也拿不到 styles 对象。
- 启用方式：把
css-loader改成对象写法，加modules: true - 示例配置：
{ loader: 'css-loader', options: { modules: true } } - 注意：只对匹配
/\.module\.css$/的文件启用更安全，可写成test: /\.module\.css$/单独配一条 rule
生产环境必须换掉 style-loader，否则会闪屏
开发时用 style-loader 是因为热更新快；但上线后 JS 加载完才插入 <style>，页面先白屏再渲染样式，用户能明显感知“闪”。必须用 MiniCssExtractPlugin.loader 提取为独立 .css 文件，靠 <link> 并行加载。
立即学习“前端免费学习笔记（深入）”；
- 安装：
yarn add mini-css-extract-plugin -D - loader 替换：把
style-loader换成MiniCssExtractPlugin.loader - 插件注册：在
plugins里加new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }) - 关键限制：这个 loader 在
mode: 'development'下会报错，必须用webpack-merge或条件判断区分环境
常见报错：找不到 xxx.png 或 @import 不生效
这通常不是 css-loader 本身的问题，而是它依赖的上下文没配全：
-
url()引用图片/字体失败 → 缺少asset-module或url-loader配置，css-loader只解析路径，不负责打包资源 -
@import './reset.css'报Can't resolve './reset.css'→ 检查css-loader的options.modules.resolve或确保resolve.alias没误覆盖node_modules - 升级 Webpack 5 后
css-loader默认禁用url()解析 → 显式加options: { url: true }
真正容易被忽略的是：Webpack 5 的 css-loader 默认关闭 importLoaders，如果你在 CSS 里 @import 了另一个含 @media 或 postcss 的文件，那些规则不会被后续 loader 处理——得手动设 importLoaders: 1 才行。
