将Webpack 4更新到Webpack 5时出现错误：选项具有未知属性'inline'。

Question

将Webpack 4更新到Webpack 5时出现错误：选项具有未知属性'inline'。

6

当我尝试从webpack 4升级到webpack 5时，出现了错误。
这是我的新webpack配置：

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中，我不知道什么是“inline”错误。这里是错误：

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"

- May'Habit

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AnilRedshift · Accepted Answer

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

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

因此，在你的devServer对象中，只需删除inline: true参数即可。