开发服务器已使用与 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”。这些属性是有效的： 对象{ allowedHosts？，bonjour？，客户端？，压缩？，devMiddleware？，标头？，historyApiFallback？，主机？，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

读取的。

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

Answer 3

你可以试试这个代码

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
require('babel-register')

module.exports = {
    entry: ['@babel/polyfill', './src/app.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './index.html'
        })
    ],
    mode: 'development',
    devtool: 'inline-source-map',
        devServer: {
        static: {
          directory: path.resolve(__dirname, 'public/'),
        },
        devMiddleware: {
            publicPath: '/dist/'
        },
        port: 3000,
        hot: "only"
    }
}

Answer 4

最低兼容的 webpack-cli 版本是 5.0.0