使用Webpack 4在React项目中添加CSS文件

我正在使用Webpack从零开始构建一个简单的React应用程序。我终于能够运行开发服务器，并且当我尝试通过CSS应用某些样式时，文件将无法加载，并且我认为Webpack 4配置不正确。

这是代码：

webpack.config.js

// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require('path');


module.exports = {
    mode: 'development',
    entry: ['./src/index.js'],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/dist',
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js|.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["react"]
                }

            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader'
            }
        ]
    },

};

我的项目结构是这样的，我将仅包含src，因为它位于根目录中：

 **src**
      |_assets
      |_componentns
      |_styles
        |_App.css
        |_index.css
      App.jsx
      index.js
      index.html

我希望能够为我拥有的每个组件添加多个CSS文件并应用它们，并能够为index.html设置索引样式。非常感谢您的帮助。