Webpack (mini-css-extract-plugin) 错误：多个块将资产发送到相同的文件名 app.js（块 src 和 css）

我已经为此努力了一段时间，即使 webpack 的结构大体上难以理解，我也找不到任何关于它应该如何工作的指导。

语境：

我有多个 JS 文件和多个 CSS 文件。我想将它们组合起来进行生产部署。我已经使用 webpack 成功地使用 JS 一段时间了，但是尝试添加 CSS 会产生错误：

Error: Conflict: Multiple chunks emit assets to the same filename app.js (chunks src and css)
    at /<redacted>/node_modules/webpack/lib/Compilation.js:4617:12
    at /<redacted>/node_modules/webpack/lib/Cache.js:91:34
    at Array.<anonymous> (/<redacted>/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
    at /<redacted>/node_modules/webpack/lib/Cache.js:91:19
    at Hook.eval [as callAsync] (eval at create (/<redacted>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
    at Cache.get (/<redacted>/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/<redacted>/node_modules/webpack/lib/CacheFacade.js:111:15)
    at /<redacted>/node_modules/webpack/lib/Compilation.js:4563:22
    at arrayEach (/<redacted>/node_modules/neo-async/async.js:2405:9)
    at Object.each (/<redacted>/node_modules/neo-async/async.js:2846:9)

我的webpack.config.js文件如下所示：

import path from 'path';
import {fileURLToPath} from 'url';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

// __dirname doesn't work with ES6 modules :/
// https://bobbyhadz.com/blog/javascript-dirname-is-not-defined-in-es-module-scope
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    src: './src/index.js',
    css: [
      path.resolve(__dirname, './css/styles.css'),
      path.resolve(__dirname, './css/properties.css'),
    ]
  },

  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, 'dev'),
    filename: 'app.js',
    library: "app"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          "css-loader"
        ],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: 'app.css',
  })]
};

我的目标是将多个 css 文件和多个 js 文件合并（并缩小）为一个 JS ( app.js) 和一个 CSS 文件 ( app.css)。

有没有人能够让这个工作？

环境

从package.json

"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.7.3",
"source-map-loader": "^4.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^5.0.1"

节点版本：

node --version
v14.17.1