How to properly apply Webpack 5 plugins for SCCS and CSS?

Question

JavaScript

Good afternoon.

I will describe what the functionality should be:
SCCS and CSS are compiled into one file
Using the autoprefixer, sort-css-media-queries, cssnano plugins

How to make the output have 2 files, one not minified, and the second minified?
How can I add the value of the version specified in package.json to the name of these files?
That is, so that the output is app.css and app.min.1.0.0.css

The code that I write

webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'development',
    entry: {
        app: path.resolve(__dirname, './src/index.js')
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        })
    ],
    devServer: {
        port: 3300
    },
    module: {
        rules: [
            {
                // css
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                     {
                         loader: 'postcss-loader',
                         options: {
                             postcssOptions: {
                                 config: path.resolve(__dirname, 'src/config/postcss.config.js')
                             }
                         },
                     },
                    
                ],
            },
            {
                // scss
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                config: path.resolve(__dirname, 'src/config/postcss.config.js'),
                            }
                        },
                    },
                    'sass-loader'
                ]
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                    presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
}

index.js

import './assets/css/main.css'
import './assets/sass/main.scss'

/*
* Это для теста babel
*/
console.log('Webpack layout')
console.log('Webpack')

// создание свойства класса без конструктора
class Game {
name = 'Violin Charades'
}
const myGame = new Game()

// создаем параграф
const p = document.createElement('p')
p.textContent = `I like ${myGame.game}.`

// создаем элемент заголовка
const heading = document.createElement('h1')
heading.textContent = 'Как интересно!'

// добавляем параграф и заголовок в DOM
const root = document.querySelector('#root')
root.append(heading, p)

main.scss

//@import '../css/main.css';

$font-size: 1rem;
$font-color: lch(53 105 40);

html {
font-size: $font-size;
color: $font-color;
}
body {
background: aqua;
display: flex;
align-items: center;
justify-content: center;
}
media screen and (max-width: 640px) {
.header { color: #cdcdcd; background: blue; }
}
media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
media screen and (max-width: 640px) {
.main { color: #cdcdcd }
}
media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
media screen and (max-width: 760px) {
.footer { color: #cdcdcd }
}
media screen and (max-width: 640px) {
.footer { color: #cdcdcd }
}

main.css

.wrap {
max-width: 1200px;
display: flex;
align-items: center;
}
h2 {
font-style: italic;
}
media screen and (max-width: 640px) {
.header { color: #cdcdcd }
}
media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
media screen and (max-width: 640px) {
.main { color: #cdcdcd }
}
media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
media screen and (max-width: 760px) {
.footer { color: #cdcdcd }
}
media screen and (max-width: 640px) {
.footer { color: #cdcdcd }
}

what I get as output in app.css

.wrap {
max-width: 1200px;
display: flex;
align-items: center;
}
h2 {
font-style: italic;
}
media screen and (max-width: 640px) {
.header { color: #cdcdcd }
}
media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
media screen and (max-width: 640px) {
.main { color: #cdcdcd }
}
media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
media screen and (max-width: 760px) {
.footer { color: #cdcdcd }
}
media screen and (max-width: 640px) {
.footer { color: #cdcdcd }
}
html {
font-size: 1rem;
color: rgb(250, 0, 4); }

body {
background: aqua;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }

media screen and (max-width: 640px) {
.header {
color: #cdcdcd;
background: blue; } }

media screen and (min-width: 760px) {
.desktop-first {
color: #cdcdcd; } }

media screen and (max-width: 640px) {
.main {
color: #cdcdcd; } }

media screen and (min-width: 1280px) {
.desktop-first {
color: #cdcdcd; } }

media screen and (max-width: 760px) {
.footer {
color: #cdcdcd; } }

media screen and (max-width: 640px) {
.footer {
color: #cdcdcd; } }

In css, even prefixes do not appear, although through scss they most likely appear not because of the autoprefixer, since they appear even when I comment out the autoprefixer to disable it.

Plugins don't seem to work at all. And in the final file, the code that was in scss has a crooked markup (whiskers went).

What am I doing wrong?