必须用MiniCssExtractPlugin.loader替换style-loader并动态切换环境、正确配置loader顺序及注册插件，否则无法提取独立CSS文件；loader须置于css-loader右侧，插件需配合html-webpack-plugin注入link标签。
直接用 MiniCssExtractPlugin.loader 替换开发时的 style-loader，就能把 CSS 提取成独立文件并正确引入——但前提是 loader 顺序、环境判断和插件注册三者必须对齐，漏一个就会回退到内联样式或报错。
loader 顺序不能颠倒：MiniCssExtractPlugin.loader 必须在 css-loader 之前
Webpack 的 use 数组是从右往左执行的，所以样式处理链必须是「先解析（css-loader）→ 再提取（MiniCssExtractPlugin.loader）」。写反了会直接报 Module build failed: Error: You forgot to add 'mini-css-extract-plugin'。
-
MiniCssExtractPlugin.loader是个“注入型 loader”，不负责解析，只负责把已解析好的 CSS 写入文件 -
css-loader负责处理@import、url()和模块化语法，必须在它之后才轮到提取 - 如果用了
sass-loader或postcss-loader，它们得排在css-loader左侧（即更早执行）
开发/生产环境要分开配置：MiniCssExtractPlugin.loader 不能用于开发热更新
在开发中用 MiniCssExtractPlugin.loader 会导致 HMR 失效，页面无法局部刷新样式——它只适合生产构建。常见错误是没做环境判断，导致 dev server 启动失败或样式丢失。
- 推荐写法：用变量
isProduction控制 loader 选择，例如isProduction ? MiniCssExtractPlugin.loader : 'style-loader' - 插件本身也得按环境注册：
plugins: isProduction ? [new MiniCssExtractPlugin()] : [] - 别试图在开发时强行启用
MiniCssExtractPlugin并配 HMR——它不支持，官方明确说明
提取后的 CSS 文件如何被 HTML 引入？靠 html-webpack-plugin 自动注入
mini-css-extract-plugin 只管生成 .css 文件，不负责插入 HTML；真正完成自动 link 标签注入的是 html-webpack-plugin。如果没装或没配，打包后 HTML 里根本看不到 <link rel="stylesheet">。
立即学习“前端免费学习笔记（深入）”；
- 确保已安装：
npm install --save-dev html-webpack-plugin - 插件需显式注册：
plugins: [new HtmlWebpackPlugin(), new MiniCssExtractPlugin()] - 默认行为是自动把提取出的 CSS 插入
，无需额外配置；如需调整位置，用inject: 'body'或模板自定义
Vue 单文件组件里的
默认规则只匹配 /\.css$/i，对 .vue 文件里的 <style lang="scss"></style> 不生效。必须扩展正则或加新 rule，否则样式仍被打包进 JS。
- 推荐合并写法：
test: /\.(sa|sc|c)ss|vue$/i，再配合issuer: { not: /\.vue$/ }避免重复处理 - 更稳妥的是拆开两段 rule：一段专抓
.vue中的样式（用vue-style-loader开发，MiniCssExtractPlugin.loader生产），另一段处理纯 CSS/SCSS 文件 - 注意
vue-style-loader和MiniCssExtractPlugin.loader不能混在同一个 use 数组里——它们互斥
最容易被忽略的是插件注册时机：它必须出现在 plugins 数组里，且不能被条件逻辑意外跳过；其次是 loader 的环境分支，很多人只改了 use 没同步改 plugins，结果生产构建时插件没生效，CSS 还是塞在 JS 里。
