Webpack5配置CSS加载器详解

本文深入解析了 Webpack 5 中 CSS 加载器（css-loader 和 style-loader）的核心配置要点与常见陷阱：强调 use 数组从右向左执行，必须将 style-loader 置于 css-loader 右侧以确保 CSS 正确解析并注入 DOM；详解如何启用 CSS Modules、区分开发与生产环境的 loader 选型（如禁用 MiniCssExtractPlugin.loader 于开发模式）、规避闪屏问题；同时揭示了 url() 资源加载失败、@import 解析异常、importLoaders 默认关闭等极易被忽视却高频出错的关键细节，为构建稳定、高效、可维护的样式处理流程提供精准实践指南。

开发环境直接用 css-loader + style-loader 就够了，但必须注意执行顺序和 mode 匹配——否则样式不生效或热更新失效。

为什么 style-loader 必须在 css-loader 右边？

Webpack 的 use 数组从右向左执行：css-loader 先把 .css 解析成 JS 模块（处理 @import、url()），再交给 style-loader 把这段 JS 里的 CSS 注入到 里生成