webpack 4：将CSS文件捆绑到一个main.css（和一个main.min.css）中

Question

我有一个这样的结构：

src/
-- styles/
   -- a.css
-- scripts/
   -- b.js
   -- c.js

我想产生一个像这样的dist

dist/
-- main.js
-- main.min.js
-- main.css
-- main.min.css

我已经成功完成了js部分，但无法弄清楚如何使用CSS。我看到的大多数技术都将css捆绑到js中，但是对于我的用例，我需要单独分发css。谢谢！

编辑： 我想通了，我需要在main.js条目文件中要求它们，我想它们是从那里提取出来的

这是我当前的配置-

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        "main": './source/scripts/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            include: /\.min\.js$/
        })]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // you can specify a publicPath here
                            // by default it use publicPath in webpackOptions.output
                            publicPath: path.resolve(__dirname, 'dist')
                        }
                    },
                    "css-loader"
                ]
            }
        ]
    }
};