Webpack提取CSS为独立文件教程

Webpack中使用MiniCssExtractPlugin提取CSS并非简单添加插件即可，而是一套需精细协同的配置体系：必须通过环境变量（而非mode）动态切换loader——开发用style-loader支持HMR，生产才启用MiniCssExtractPlugin.loader；publicPath必须显式、精准配置以确保CSS内相对资源路径正确解析，尤其在子目录或CDN部署场景；多处重复引入同一CSS会触发Conflicting order警告，需统一入口引入或借助splitChunks归并，而非粗暴忽略；SCSS/LESS等预处理器同样需同步替换loader链首项，且PostCSS位置须严格遵循执行顺序。任一环节疏漏，轻则样式不显示、资源404，重则样式错乱、构建失效——真正考验的是对loader行为、路径解析与模块依赖关系的系统性理解。

MiniCssExtractPlugin 不是“加个插件就能抽 CSS”——它必须配合 loader 替换、环境判断和路径控制，否则开发时样式不显示、生产时资源 404、顺序警告满屏报错。

开发环境用 style-loader，生产才用 MiniCssExtractPlugin.loader

MiniCssExtractPlugin.loader 在开发阶段完全不注入样式，只在生产构建时生成独立 .css 文件。如果直接写死 MiniCssExtractPlugin.loader，webpack serve 启动后页面就是白的。

• 必须用 process.env.NODE_ENV === 'production' 做 loader 分支，mode 字段对 loader 行为无影响（Webpack 5+）
• 推荐写法：use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader']
• 开发时 style-loader 支持 HMR；若想避免重复