开发服务器已使用与 API 架构不匹配的选项对象进行初始化。未知属性“publicPath”

Question

我正在使用 webpack：5.71.0 webpack-cli：4.9.2 webpack-dev-server 4.8.1

在我的 webpack.config.js 中

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: { presets: ["@babel/env"] }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    resolve: { extensions: ['*', '.js', '.jsx'] },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: './bundle.js'
    },
    devServer: {
        static: path.join(__dirname, 'public/'),
        publicPath: 'http://localhost:3000/dist/',
        port: 3000,
        hot: "only"
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

我收到以下错误 [webpack-cli] 选项对象无效。开发服务器已使用与 API 架构不匹配的选项对象进行初始化。

• options 有一个未知属性“publicPath”。这些属性有效： object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, HistoryApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware ？，onBeforeSetupMiddleware？，onListening？，打开？，端口？，代理？，服务器？，setupExitSignals？，setupMiddlewares？，静态？，watchFiles？，webSocketServer？}

publicPath 的新替代方案是什么？

Answer 1

看起来您的 webpack 配置是使用 webpack-dev-server v3 编写的。根据webpack-dev-server v4 迁移指南， v4 的架构已更改

因此，您的 devServer 块应将 publicPath 放置在 devMiddleware 部分中，即：

devServer: {
  static: path.join(__dirname, 'public/'),
  devMiddleware: {
    publicPath: '/dist/'
  },
  port: 3000,
  hot: "only"
},

Answer 2

您可能根本不需要publicPath在配置中进行设置；devServer它可能是从 读取的output.publicPath。

尝试摆脱它，看看事情是否仍然有效。（他们应该。）