Webpack 样式加载器与 mini-css-extract-plugin

Question

更新写下这些句子后，我给了自己答案。使用 style-loader 我不需要先构建，我什至可以检查我的存储库并启动 webpack-dev-server。这是正确的吗？

不过，还有第二个问题。

我有一个 Spring- 使用 thymeleaf 和 webpack 的启动应用程序。

在我的 startpage.html 中，我通过 link 标签包含了一个样式表：

<!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 文件分为开发和生产部分。开发部分使用 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-标签 <link rel="stylesheet" th:href="@{/css/startpage.css}"/>。但是，我有一个巨大的 css 文件，每次我在开发模式下短时间内重新加载我的一侧时，我的 html 没有样式，这会导致以下 problem (html 短时间内未设置样式）。

现在我在问为什么我什至应该使用 style-loader 而不是直接插入 link 标签并使用 mini-css-extract-plugin？有什么好处？

其次，我想问我是否可以更快地加载 style-loader 生成的样式？

Answer 1

写完这些句子我给了自己答案。使用 style-loader 我不需要先构建，我什至可以检查我的存储库并启动 webpack-dev-server。

编辑：一些有用的东西link

Webpack 样式加载器与 mini-css-extract-plugin

Webpack style-loader vs mini-css-extract-plugin

thymeleaf

webpack

webpack-style-loader

mini-css-extract-plugin