如何在Webpack中利用MiniCssExtractPlugin提取并引入CSS？-css教程-PHP中文网

开发环境必须用style-loader，因其支持hmr并动态注入标签；minicssextractplugin.loader仅在生产构建时提取css为文件，开发时无dom操作，硬启用会导致白屏。

如何在webpack中利用minicssextractplugin提取并引入css？

不能直接用 MiniCssExtractPlugin.loader 替代 style-loader 就完事——它只在生产构建时写文件，开发阶段不注入样式，页面会白屏。

为什么开发环境必须用 style-loader？

MiniCssExtractPlugin.loader 在 webpack serve 运行时完全不操作 DOM，也不插入 <style></style> 标签；它只在 webpack build 阶段把 CSS 内容从 JS chunk 里剥离、写入物理 .css 文件。所以开发时硬切它，页面就没了样式。

开发要热更新（HMR），只能靠 style-loader 动态替换 <style></style> 标签
想避免重复 <style></style> 标签，可以加配置：{ injectType: 'singleton' }
Webpack 的 mode 字段对 loader 行为无影响，必须靠 process.env.NODE_ENV === 'production' 判断

怎么写 loader 链才不出错？

loader 执行顺序是从右往左，MiniCssExtractPlugin.loader 必须是第一个（最左边），否则 CSS 提取失败。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确写法：use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
错误写法：use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'] —— 两个 loader 同时生效，结果不可控
MiniCssExtractPlugin.loader 不接受任何 options，不像 style-loader 支持 { injectType: 'singleton' }
所有样式类型都要覆盖：.css、.scss、.less、.styl 规则里都得换掉 loader 首项

提取后图片路径 404 怎么办？

CSS 里写的 url(./img/logo.png) 是相对路径，提取成独立 .css 文件后，它的“当前目录”变了，但 Webpack 默认不重写这些 URL —— 90% 的 404 都卡在这儿。

MiniCssExtractPlugin 的 publicPath 选项决定 CSS 内部相对路径如何解析，优先级高于 output.publicPath
部署到子目录（如 /app/）或 CDN（如 https://cdn.example.com/v2/）时，必须显式传入：publicPath: '/app/'
如果用了 file-loader 或 url-loader，确保它们的 publicPath 和插件一致，否则图片仍会 404