webpackthymeleafwebpack-style-loadermini-css-extract-plugin

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

Update After writing these sentences I gave myself the answer. With style-loader i do not need to build first, i can even checkout my repository and start webpack-dev-server. Is this correct?

However, second question is remaining.

I've got a Spring-Boot Application using thymeleaf and webpack.

In my startpage.html I'm including a stylesheet by link tag:

<!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>

I want to improve the app and therefore I'm following this tutorial. I've divided my webpack.config file into a dev and prod part. Dev part is using webpack style-loader, prod is using 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"
    })
  ]

I already know what those tools are doing. With the help of style-loader i could import my css through my js file:

startpage.js

import "../css/startpage.scss";

Therefore I do not need to write the link-tag <link rel="stylesheet" th:href="@{/css/startpage.css}"/> explicitly in my html. However, I've got a huge css file and everytime I reload my side during development-mode for a short period of time there my html is unstyled which causes the following problem (html is unstyled for short period of time).

Now I'm asking why i should even use the style-loader and not just go up with inserting a link tag and use mini-css-extract-plugin? Whats the advantage?

Secondly, I'm asking if I could load the styles produced by style-loader even faster?

Solution

  • After writing these sentences I gave myself the answer. With style-loader i do not need to build first, i can even checkout my repository and start webpack-dev-server.

    Edit: Some useful link