Webpack - CSS Minification and Bundle

Question

Almost three hours of research and here I am asking for community help.

I have an project with the following CSSs:

• The ones being used by every page (generics): buttons.css, tables.css, forms.css andlists.css

• The one being used only by a specific HTML page: page-custom-buttons.css.

For the ones being used by every page I want to bundle them and minify into a single file. The one being used only by a specific page I just want to minify them.

From the many guides, questions and documentation I have walk though I found the following things:

• The extract-text-webpack-plugin is now deprecated and mini-css-extract-plugininstead.
• We can use mini-css-extract-plugin to bundle the CSSs.
• We can use optimize-css-assets-webpack-plugin to optimize it but it will require the installation of another package for dealing with js minifier (more about here)

The MiniCssExtractPlugin description says

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

From the little I understand from the definition and the examples this shouldn't be used as a bundler but instead for giving the funcionallity of importing CSS from JS code like we do in react (import './styles.css').

The real questions are, don't webpack fit in this type of problems? Should I use other software? What does MiniCssExtractPlugin really do and what's the different between the css-loader. How can I do bundle myfiles and minifying them correctly?

I found a similiar unanswsered question: https://dev.to/shaijut/how-to-bundle-mutiple-js-and-css-files-into-single-bundle-2a70

Thank you for someone who might reply to this answer. Anyhing you know helpful!