Webpack style-loader vs mini- css -extract-plugin - PullRequest
Новая
       73

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

0 голосов
/ 26 марта 2020

Обновление После написания этих предложений я дал себе ответ. С style-loader мне не нужно сначала строить, я даже могу проверить свой репозиторий и запустить webpack-dev-server. Это правильно?

Однако второй вопрос остается.

У меня есть приложение 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>

Я хочу улучшить приложение, и поэтому я следую этому учебнику . Я разделил свой файл webpack.config на части для разработчиков и разработчиков. Часть разработки использует webpack style-loader, prod использует 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 я могу импортировать мой css через мой js файл:

стартовая страница. js

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

Поэтому я делаю не нужно явно указывать ссылку-тег <link rel="stylesheet" th:href="@{/css/startpage.css}"/> в моем html. Тем не менее, у меня есть огромный файл css, и каждый раз, когда я перезагружаю свою сторону во время разработки в течение короткого периода времени, мой html не устанавливается, что вызывает следующую проблему (html не используется в течение короткого промежутка времени).

Теперь я спрашиваю, почему я должен даже использовать style-loader, а не просто go при вставке тега link и использовать mini-css-extract-plugin? В чем преимущество?

Во-вторых, я спрашиваю, могу ли я загрузить стили, созданные с помощью style-loader еще быстрее?

1 Ответ

0 голосов
/ 27 марта 2020

После написания этих предложений я дал себе ответ. С style-loader мне не нужно сначала создавать, я даже могу проверить свой репозиторий и запустить webpack-dev-server.

...