Webpack - минификация и сборка CSS

Question

Почти три часа исследований, и вот я прошу помощи сообщества.

У меня есть проект со следующими CSS:

• Те, которые используются на каждой странице (общие):buttons.css, tables.css, forms.css а такжеlists.css

• Тот, который используется только определенной HTML-страницей:page-custom-buttons.css.

Я хочу объединить те, которые используются на каждой странице, и минимизировать их в один файл. Тот, который используется только на определенной странице, я просто хочу их минимизировать.

Из множества руководств, вопросов и документации, которые я видел, я нашел следующие вещи:

• В extract-text-webpack-plugin теперь устарела и mini-css-extract-pluginвместо.
• Мы можем использовать mini-css-extract-plugin для объединения CSS.
• Мы можем использовать optimize-css-assets-webpack-pluginчтобы оптимизировать его, но для этого потребуется установка другого пакета для работы с js minifier (подробнее здесь)

В MiniCssExtractPlugin описание говорит

Этот плагин извлекает CSS в отдельные файлы. Он создает файл CSS для каждого файла JS, который содержит CSS. Он поддерживает загрузку CSS и SourceMaps по запросу.

Из того немногого, что я понимаю из определения и примеров, это не следует использовать в качестве сборщика, а вместо этого для обеспечения функциональности импорта CSS из кода JS, как мы это делаем в response (import './styles.css').

Реальный вопрос: не подходит ли webpack для решения такого рода проблем? Стоит ли использовать другое программное обеспечение? Что на самом деле делает MiniCssExtractPlugin и в чем разница междуcss-loader. Как я могу связать свои файлы и правильно их минимизировать?

Я нашел похожий вопрос без ответа: https://dev.to/shaijut/how-to-bundle-mutiple-js-and-css-files-into-single-bundle-2a70

Спасибо за того, кто ответил на этот ответ. Все, что вы знаете, полезно!