Webpack 样式加载器与 mini-css-extract-plugin
Posted
技术标签:
【中文标题】Webpack 样式加载器与 mini-css-extract-plugin【英文标题】：Webpack style-loader vs mini-css-extract-plugin 【发布时间】：2020-07-07 07:39:29 【问题描述】：更新
写完这些句子后，我给了自己答案。使用style-loader 我不需要先构建，我什至可以检查我的存储库并启动 webpack-dev-server。这是正确的吗？
但是，还有第二个问题。
我有一个使用 thymeleaf 和 webpack 的 Spring-Boot 应用程序。
在我的startpage.html 中，我通过链接标签包含了一个样式表：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="@/css/startpage.css"/>
</head>
...
<script th:src="@/js/startpage.js"></script>
</body>
</html>
我想改进应用程序，因此我关注此tutorial。我已经将我的 webpack.config 文件分成了 dev 和 prod 部分。
开发部分使用webpack style-loader，生产部分使用mini-css-extract-plugin。
webpack.dev.config
...
module:
rules: [
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
]
webpack.prod.config
module:
rules: [
test: /\.scss$/,
exclude: /printView\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
]
,
plugins: [
new MiniCssExtractPlugin(
filename: "css/[name].css",
chunkFilename: "css/[name].css"
)
]
我已经知道这些工具在做什么。在style-loader 的帮助下，我可以通过我的 js 文件导入我的 css：
startpage.js
import "../css/startpage.scss";
因此，我不需要在我的 html 中明确地编写链接标签 <link rel="stylesheet" th:href="@/css/startpage.css"/>。
但是，我有一个巨大的 css 文件，每次我在开发模式下重新加载我的身边很短的时间，我的 html 没有样式，这会导致以下problem（html 在短时间内没有样式）。
现在我问为什么我应该使用style-loader 而不仅仅是插入link 标签并使用mini-css-extract-plugin？有什么好处？
其次，我问我是否可以更快地加载style-loader 生成的样式？
【问题讨论】：
【参考方案1】：写完这些句子后，我给了自己答案。使用 style-loader 我不需要先构建，我什至可以检查我的存储库并启动 webpack-dev-server。
编辑：一些有用的link
【讨论】：
以上是关于Webpack 样式加载器与 mini-css-extract-plugin的主要内容，如果未能解决你的问题，请参考以下文章
Webpack 为啥只有 scss 有效，而 css 无效？