将 webpack 4 更新到 webpack 5 获取错误选项有一个未知属性“inline”

Question

当我尝试从 webpack 4 更新到 webpack 5 时，出现错误。
这是我的新 webpack.config：

const { merge } = require('webpack-merge');
const common = require("./webpack.common.js");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require('dotenv-webpack');

module.exports = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    watchOptions: {
        poll: true,
        ignored: '/node_modules/',
    },
    devServer: {
        contentBase: path.join(__dirname, "public"),
        inline: true,
        compress: true,
        port: 9000,
        historyApiFallback: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "public", "index.html"),
            fileName: path.join('.', 'build', 'index.html')
        }),
        new Dotenv({
            path: './.env', // Path to .env file (this is the default)
            safe: false // load .env.example (defaults to "false" which does not use dotenv-safe)
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    "presets": ["@babel/preset-env","@babel/preset-react"],
                    "plugins": [
                        ["import", {"libraryName": "antd", "libraryDirectory": "lib", "style": "css"}],
                        "@babel/plugin-proposal-class-properties"
                    ]
                }
            },
            {
                test: /\.html$/i,
                loader: 'html-loader'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg|ico)$/i,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            }
        ]
    },
});

它与 webpack 4 完美配合，但对于 webpack 5 我不知道“内联”错误是什么。这是错误：

webpack-dev-server --config webpack.dev.js --progress

1% setup initialize[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'inline'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

这是我的 package.json

"webpack": "^5.54.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0",
"webpack-manifest-plugin": "^4.0.2",
"webpack-merge": "^5.8.0"

Answer 1

看起来该inline标志已从 webpack-dev-server v4 中删除。从迁移指南来看，它已经消失了

内联（iframe 实时模式）选项已被删除且没有替换。

所以在你的devServer对象中，只需删除inline: true参数