Webpack 5 中需配置 css-loader 和 style-loader 处理 CSS：css-loader 解析 @import/url() 并转为 JS 模块，style-loader 将其注入 <style> 标签；开发用 ['style-loader', 'css-loader']，生产用 [MiniCssExtractPlugin.loader, 'css-loader'] 并配插件。
webpack 5 里怎么配 css-loader 和 style-loader
不配这两个 loader，import './index.css' 就会直接报错：Module parse failed: Unexpected token。webpack 默认只认识 JS，CSS 文件必须显式声明如何处理。
核心链路是：CSS 文件 → css-loader（解析 @import、url()，转成 JS 模块）→ style-loader（把 CSS 字符串插入 <style> 标签到页面）。
-
css-loader必须在style-loader前面，顺序反了会报TypeError: Cannot read property 'toString' of undefined - 开发时用
style-loader最快，但生产环境一般换成MiniCssExtractPlugin.loader提取为独立 CSS 文件 - 如果用了 CSS Modules，
css-loader要加modules: true，否则类名不会局部化
为什么 MiniCssExtractPlugin 在 dev 环境不能和 style-loader 混用
因为 MiniCssExtractPlugin.loader 是基于文件输出的，它依赖 webpack 的 chunk 分离机制，在热更新（HMR）阶段无法动态替换样式——你改一个 CSS，页面不会实时刷新，甚至可能白屏或样式丢失。
常见错误现象：Cannot use [MiniCssExtractPlugin] plugin as it provides no runtime，通常是你在 mode: 'development' 下误用了它。
立即学习“前端免费学习笔记（深入）”；
- 开发环境推荐：
['style-loader', 'css-loader'] - 生产环境推荐：
[MiniCssExtractPlugin.loader, 'css-loader'] - 别忘了在
plugins数组里加new MiniCssExtractPlugin({ filename: '[name].css' })，否则提取不生效
css-loader 的 importLoaders 参数到底控制什么
它决定：当一个 CSS 文件通过 @import 引入另一个 CSS 文件时，被引入的那个文件，要往前数几个 loader 来处理它。
比如你配置了 PostCSS（postcss-loader），又用了 @import 'reset.css'，但发现 reset.css 没走 PostCSS，问题就出在这里。
-
importLoaders: 0：只处理当前文件，@import进来的不处理 -
importLoaders: 1：被@import的文件会经过前 1 个 loader（比如postcss-loader） - 典型配置：
{ loader: 'css-loader', options: { importLoaders: 2 } }，对应[postcss-loader, sass-loader]的顺序
打包后 CSS 中的图片路径 404 怎么修
根源是 url('./img/logo.png') 在 CSS 里是相对路径，但 webpack 打包后图片可能被重命名、挪到 dist/img/xxx.abc123.png，而 CSS 里的路径没同步更新。
关键不是改 CSS 写法，而是确保 css-loader 和 file-loader（或 asset-module）配合正确。
- webpack 5+ 推荐用
type: 'asset'处理图片，不用单独配file-loader -
css-loader默认会把url()当模块请求，所以只要图片资源 loader 配对了，路径就会自动修正 - 如果用了
public/目录放图，url('/img/logo.png')（以/开头）才有效；否则一律用相对路径 + 模块化处理
importLoaders 和 loader 顺序，尤其加了 PostCSS 或 Sass 后，CSS 不生效往往不是语法错，而是 loader 没“传下去”。 
