webpack-dev-middleware - webpack-dev-middleware：选项具有未知属性“logLevel”

Question

我目前正在升级 Webpack + 相关模块并收到以下错误。这有点令人困惑，因为我们没有指定提到的配置参数。任何帮助，将不胜感激。

[webpack-cli] Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'logLevel'. These properties are valid:
   object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }

我们的 webpackdevServer配置有以下内容：

const config = {
    entry: path.resolve(PATHS.src, `index.tsx`),
    mode: devEnv ? "development" : "production",
    devtool: devEnv ? "eval-source-map" : "source-map",
    devServer: {
        hot: true,
        historyApiFallback: true,
        contentBase: PATHS.dist,
        port: 3000,
        stats: "errors-warnings",
        host: "0.0.0.0",
        compress: true,
        before(app) {
            app.use(compression({}));
        },
    },
    output: {
        path: PATHS.dist,
        publicPath: "",
        filename: "xxx.[name].[fullhash].js",
        chunkFilename: "xxx.[name].[chunkhash].js",
        clean: true,
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        alias: {
            srcRootDir: path.resolve(__dirname, "src/"),
            react: "preact/compat",
            "react-dom/test-utils": "preact/test-utils",
            // react-dom must be last says preact docs.
            "react-dom": "preact/compat",
        },
    },
    module: {
        rules: [
            {
                test: /\.(t|j)sx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                    },
                ],
            },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
            {
                test: /\.(png|svg|jpg|gif)$/,
                type: "asset/resource",
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            templateParameters: {
                title: "xxx",
            },
            template: path.resolve(PATHS.src, "static/index.html"),
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(PATHS.src, "static"),
                    to: PATHS.dist,
                },
            ],
        }),
    ],
    optimization: {
        splitChunks: {
            chunks: "all",
        },
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,
            }),
        ],
    },
};