style-loader 不生成 CSS 文件，而是将 CSS 字符串注入 JS bundle 并运行时动态创建 style 标签；需用 MiniCssExtractPlugin.loader 替换才能提取独立 CSS 文件，且须按环境动态切换 loader 并正确配置 publicPath。
style-loader 本身就不生成 CSS 文件
style-loader 的设计目标就是运行时注入：它把解析后的 CSS 字符串打包进 JS bundle，等 JS 执行时动态创建 <style> 标签并插入 <head>。整个过程不产出任何 .css 文件——它压根没这个能力。
Webpack 默认不会拆出样式文件，必须显式配置提取逻辑
Webpack 5+ 默认对 .css 文件不做任何输出处理，只靠 css-loader + style-loader 链，结果就是 CSS 被转成 JS 字符串、打进 JS chunk。想生成独立 .css 文件，必须：
- 在
module.rules中替换style-loader为MiniCssExtractPlugin.loader - 在
plugins中注册new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }) - 确保该 rule 只在生产环境生效（
process.env.NODE_ENV === 'production'判断）
开发时硬切 MiniCssExtractPlugin.loader 会导致白屏
这是最常踩的坑：MiniCssExtractPlugin.loader 在开发阶段（webpack serve）完全不注入样式，也不支持 HMR。如果 loader 数组里写死它，页面一启动就是白的，控制台还可能报 Cannot find module 类错误。
正确做法是动态分支：
立即学习“前端免费学习笔记（深入）”；
use: [ isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader' ]
其中 isProduction 建议用 process.env.NODE_ENV === 'production'，别依赖 mode 字段——Webpack 5+ 中 mode 对 loader 行为无影响。
publicPath 配错会让 CSS 里的 url() 全部 404
生成了 main.css 文件，但里面 url(./logo.png) 加载失败？90% 是 MiniCssExtractPlugin 的 publicPath 没设对。
它决定的是 CSS 内部相对路径的解析基准，不是 HTML 的 <link> 地址。部署到子目录（如 /app/）或 CDN（如 https://cdn.example.com/v2/）时，必须显式传入：
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
publicPath: '/app/'
})
漏掉这步，图片、字体、背景图全挂，但控制台往往只报 404，不提示根源。
