Как правильно применять плагины Webpack 5 для SCCS и CSS?

Question

[Владислав]

Добрый день.

Опишу какой должен быть функционал:
SCCS и CSS компилируются в один файл
Применение плагинов autoprefixer, sort-css-media-queries, cssnano

Как сделать так, чтобы на выходе было 2 файла, один не минифицированный, а второй минифицированный?
Как в название этих файлов подтягивать значение версии прописанной в package.json?
То есть, чтобы на выходе были app.css и app.min.1.0.0.css

Код который я пишу

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 }
}

что получаю на выходе в 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; } }

У css даже префиксы не появляются хотя и через scss они скорее всего появляются не из за автопрефиксера, поскольку они появляются даже тогда когда автопрефиксер коментирую, чтобы отключить.

Плагины судя по всему вообще не применяются. И в итоговом файле, тот код, что был в scss имеет кривую разметку (усы поехали).

Что делаю не так?