css-loader必须在style-loader之前，因loader从右到左执行：css-loader先解析@import/url()为模块依赖，style-loader再注入CSS；颠倒则url路径未解析导致“Can't resolve”错误。
webpack配置里css-loader和style-loader的执行顺序为什么不能颠倒
因为Webpack的loader链是**从右到左、从下到上**执行的，css-loader负责解析@import、url()等语法并转成模块依赖，style-loader才负责把最终的CSS字符串插入到中。如果调换顺序，style-loader会直接尝试处理原始CSS文本（含未解析的url(./img.png)），报错Module not found: Error: Can't resolve './img.png'。
-
use: ['style-loader', 'css-loader']✅ 正确：先解析再注入 -
use: ['css-loader', 'style-loader']❌ 错误：style-loader收不到已解析的资源路径 - 在Webpack 5+中，若启用了
experiments.css，可跳过这两个loader——但仅限纯CSS，不支持@import或url()中的相对路径
开发环境用style-loader，生产环境为什么通常换MiniCssExtractPlugin
style-loader把CSS塞进JS bundle，运行时动态创建<style></style>标签；而MiniCssExtractPlugin把CSS单独抽成.css文件，利于缓存、压缩、CDN分发。但它的代价是：**只支持同步加载，不兼容HMR热更新**——改一个CSS文件，整个页面会刷新。
- 开发时用
style-loader：热更新快，样式修改即刻生效 - 生产时用
MiniCssExtractPlugin.loader：生成独立main.css，配合css-minimizer-webpack-plugin压缩 - 别在
rules里硬编码插件名，用process.env.NODE_ENV === 'production'动态切换loader数组
css-loader的modules选项开不开？怎么判断该用局部还是全局
开modules会让.module.css文件自动启用CSS Modules（类名哈希化），避免全局污染；但普通.css仍走全局。不是“所有CSS都要模块化”，关键看使用场景：
- 组件库、React/Vue单文件组件里的样式 → 开
modules: true或{ mode: 'local' } - 重置样式（reset.css）、第三方UI库（如Ant Design）的CSS → 必须关
modules，否则选择器失效 - 想混用？用
modules: { mode: 'icss' }只处理:export和:import，不影响选择器 - 注意：
css-loaderv6+默认modules: false，v5是true，升级时容易漏配导致样式丢失
遇到Can't resolve 'xxx' in 'xxx'且指向CSS里的url()怎么办
这是css-loader解析完路径后，Webpack找不到对应资源——常见于图片、字体路径写错，或缺少file-loader/asset-module处理。
立即学习“前端免费学习笔记（深入）”；
- Webpack 5+：确保
css-loader之后有type: 'asset'规则匹配/\.(png|jpg|gif|woff2?)$/i，否则url(./icon.png)无法被识别为模块 - 路径别写错：
url(./fonts/icon.woff2)中的./是相对于CSS文件位置，不是webpack.config.js - 如果用了别名（
resolve.alias），css-loader默认不识别，得加alias: { ...resolve.alias }到css-loader的options里
css-loader版本差异带来的默认行为变化，以及url()路径解析与Webpack资源规则的耦合关系——这两处一出问题，错误信息往往不指明根源，只报“找不到模块”。 
