Project bundler on webpack?

Question

JavaScript

I have a task: to typeset in the index.html file and write code in scss
and everything should be done in one src folder and when building, everything should be assembled in build

scss should be compiled into css and a file should be created,
all js should be collected in one file and in the js subfolder /main.js

Structure src

-src
    --images
         ...
    --scss
         style.scss
         anyfiles.scss
    --js
         one.js
         two.js
    --fonts
           ...
    index.html

build structure

-build
    --images
        ---...
    --css
         style.css
         anyfiles.css
    --js
         main.js
    --fonts
        ...
    index.html

As a result, I tried gulp (error with python 2, says I need to install, I don’t want to)
tried parceljs does not meet my requirements
and I settled on webpack where you can build and do as you want.

I've put together something like this:

webpack.config

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const miniCss = require('mini-css-extract-plugin');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/build/',
        filename: "[name].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new miniCss({
            filename: '/css/main.css',
        }),
        new CopyPlugin({
            patterns: [
                { from: "src/images", to: "images" },
                { from: "src/html", to: "" },
            ],
        })
    ],
    module: {
        rules: [{
            test:/\.(s*)css$/,
            use: [
                miniCss.loader,
                'css-loader',
                'sass-loader',
                'postcss-loader',
                'group-css-media-queries'
            ]
        }]
    }
}

package

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "group-css-media-queries": "^1.4.1",
    "mini-css-extract-plugin": "^1.3.4",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^10.1.1",
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1"
  }
}

In all this, I don’t know how to make the webpack collect everything as it should without using main.js
without importing css there (as in gulp) go through the files, compile as needed and copy them to build

, even though I don’t process html and I just have to copy them and I don't know how to tell the copy-webpack-plugin plugin to copy only *.html from the root

build.

Who has their own experience or advice on how to assemble a normal config / builder, please tell me.