Webpack - есть вопросы

не так давно почувствовал необходимость в использовании сборщиков, мой выбор пал на webpack.

Но появилась проблема со сборкой CSS и JS файлов, webpack собирает множество CSS файлов (sass, less) и множество JS файлов в один.

Как заставить его собирать не все файлы вместе, а по одному?

Чтобы он брал из папки color.sass, main.sass и компилировал их не в один файл, а в несколько (color.css, main.css)?

Но с CSS это не такая уж и большая проблема, самое важное сделать то же самое с JS файлами, которые из app.js, main.js и form.js (все названия и сходства являются лишь совпадением) превращаются в один большой JS файл.

В общем, как заставить webpack собирать несколько файлов? На данный момент мой webpack.config выглядит вот так:

const path = require('path');
const miniCss = require('mini-css-extract-plugin');


module.exports = {
    entry: './webpack/app.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'Content/Themes/Frontend/default/assets/css')
    },
    module: {
        rules: [{
            test:/.(s*)css$/,
            use: [
                miniCss.loader,
                'css-loader',
                'sass-loader',
            ]

        }, {
            test: /.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                presets: ['@babel/preset-env']
                }
            }
        }],
    },
    plugins: [
        new miniCss({
            filename: 'style.css',
        }),
    ]
};

Заранее спасибо за ответы, либо советы.

P.S – так же дополню, как можно собирать файлы CSS и JS в разные папки?