How to configure webpack to bundle js and css into separate files?

Question

PHP

Good afternoon.
I'm slowly learning webpack. Unfortunately, I can't figure out how to manage bundle builds. Everything is going into one bundle, which I specify both js and css.
I read all sorts of things, but I could not find how I could collect my sources into different files. For example bundle.css, bundle.js and vendor.js (respectively for my styles, code and libraries.)
The configuration file from where I removed all my experiments looks like this. How do I need to change it so that js and css can be packed into different files?

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
};

Answer 1

header method is quite an option and the only "correct" way - just use output buffering.
https://habrahabr.ru/company/mailru/blog/248573/

Answer 2

I think I found the answer to the question, at least in terms of css.
How to compile styles separately from JS in WebPack?
PS In my defense, I will say that before asking a question, I googled for almost a day.
However, it was worth writing to the toaster, as the answer was found literally immediately. The effect of the "aura of the system administrator" is not otherwise.