How to configure Webpack for theme layout, without being tied to JS files?

Question

Web development

Hello everyone, there is something like this folder structure ./src/:

.
├── html
│   ├── category.html
│   └── index.html
├── js
│   └── index.js
└── sass
    ├── critical.sass
    ├── main.sass
    └── _variables.sass

As a result, I want to get this:

.
├── category.html
├── index.html
├── js
│   └── index.min.js
└── styles
    ├── critical.min.css
    └── main.min.css

The algorithm is this:

1. All HTML files are simply copied from folder ./src/html/to folder ./dist/. Later these files will be used to integrate the layout into the engine.
   
2. Only two styles: critical.sassboth main.sassprocessed by the preprocessor and exported to a folder./dist/styles/[name].min.css
   
3. I haven't decided on JS yet, but most likely the file should be minified and exported to ./dist/js/[name].js
   

How should the config file look like in order to get the structure I need at the output and painlessly develop? The first time I'm trying to set up a webpack config, I'm looking at the dock, and I don't quite understand which side to approach. I see that styles are sometimes connected there via JS, and it feels like everything is tied to one JS file there. But I don't need it, I want to connect the styles as usual somewhere in the footer at the very bottom, because this is not some kind of SPA application, the entire front-end will then be integrated into the CMS.