时间戳

首页 > 解决方案 > webpack.config 有一个未知属性“publicPath”

reactjs - webpack.config 有一个未知属性“publicPath”

问题描述

无法启动 my-react-app，因为 webpack.cofig 文件有错误并且无法修复。到处搜索，但无法找到解决方案。谁能建议我该怎么做？

代码：

npx webpack-dev-server --mode development

错误："[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 'publicPath'. 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? }"

Webpack.cofig 文件代码：

    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: {
        contentBase: path.join(__dirname, 'public/'),
        port: 3000,
        publicPath: 'http://localhost:3000/dist/',
        hot: 'only'

    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

标签： reactjswebpackecmascript-5webpack-cli

解决方案

该属性publicPath应该用于静态内容，即devServer.static开发服务器中间件选项devServer.devMiddleware，而不是devServer直接用于。阅读此处了解更多详情。

删除publicPath和 webpack 应该可以正常工作。此外，publicPath指向您尝试提供的目录。您使用了URL无效的。

推荐阅读