无效选项对象错误

预期行为

成功的HTML捆绑包

实际行为

终端错误消息- [webpack-cli]无效的选项对象。已使用与API架构不匹配的选项对象初始化开发服务器。选项具有未知属性“module”。这些属性是有效的...

重现步骤

• npm i -g网络包、网络包客户端、网络包开发服务器
• npm i webpack，webpack-cli，webpack-dev-server，html加载程序，文件加载程序，提取加载程序
• 联系我们/联系我们
• 写出html文件的一些内容
• 配置文件/配置文件
• 将以下内容放入webpack.dev.js中

const path = require('path')
      
    module.exports = {
      entry: {
        main: "./src/main.js",
      },
      mode: "development",
      output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "/",
      },
      devServer: {
        static: "dist",
        allowedHosts: ['localhost:8080'],
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: [
                {
                  loader: 'style-loader',
                },
                {
                  loader: 'css-loader',
                }
              ]
            },
            {
              test: /\.html$/i,
              use: [
                {
                  loader: 'file-loader',
                  options: {
                    name: '[name].html',
                  }
                },
                {
                  loader: 'extract-loader',
                },
                {
                  loader: 'html-loader',
                },
              ]
            }
          ]
        }
      },
    };

我的环境：

• 浏览器：Chrome浏览器
• 操作系统：Windows 10家庭版（10.0.19044）
• 节点编号：16.17.0
• 国家预防机制：8.19.2

相关性

"dependencies": {
    "css-loader": "^6.7.1",
    "dotenv": "^16.0.2",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-loader": "^4.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }

其他上下文

在我本地安装了html-loader，file-loader和extract-loader之后，这个错误出现了。
指令码...

"scripts": {
"start": "webpack-dev-server --config=config/webpack.dev.js",
}

可能的解决方案

通过查看以前的帖子，我认为这是一个版本问题，但由于我只使用节点js，我将感谢澄清什么时候webpack 5是最佳的。