Webpack 5配置CSS加载器教程
2026-05-26 12:15:38
0浏览
收藏
本文深入解析了 Webpack 5 中 CSS 加载器（css-loader 和 style-loader）的核心配置要点与常见陷阱：强调 use 数组从右向左执行，必须将 style-loader 置于 css-loader 右侧以确保 CSS 正确解析并注入 DOM；详解如何启用 CSS Modules、区分开发与生产环境的 loader 选型（如禁用 MiniCssExtractPlugin.loader 于开发模式以避免报错）、规避页面闪屏问题；同时揭示易被忽视的关键细节——如 Webpack 5 默认关闭 url 解析和 importLoaders，导致图片引用失败或 @import 后续处理失效，并给出精准修复方案，助你一次配对、稳定生效。
开发环境直接用 css-loader + style-loader 就够了，但必须注意执行顺序和 mode 匹配——否则样式不生效或热更新失效。
为什么 style-loader 必须在 css-loader 右边？
Webpack 的 use 数组从右向左执行：css-loader 先把 .css 解析成 JS 模块（处理 @import、url()），再交给 style-loader 把这段 JS 里的 CSS 注入到 里生成
