区块链项目执行npm run dapp时遭遇webpack-dev-server配置错误

问题原因 #

webpack-dev-server 从 v4 版本开始，移除了devServer配置项下的stats属性，该属性已被移至配置顶层，或通过devMiddleware.stats来控制开发服务器的日志输出。你的错误提示说明当前配置（可能是未完全粘贴的部分，或是依赖传递的配置）仍在devServer下使用了stats，导致 schema 校验失败。

另外，你预期应用在http://localhost:8080启动，但当前配置里devServer.port设为了3000，这也需要同步修正。

修改后的 webpack.config.js #

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',
    // 将 stats 移至配置顶层，控制整体构建日志
    stats: 'errors-warnings',
    devServer: {
        static: {
          directory: path.resolve(__dirname, 'public/'),
        },
        devMiddleware: {
            publicPath: '/dist/',
            // 也可以在这里配置 devMiddleware 专属的 stats
            // stats: 'minimal'
        },
        // 修正为你预期的端口8080
        port: 8080,
        hot: "only"
    }
}

关键修改说明 #

• 移除devServer下的stats：v4 版本不再支持该位置的stats，将其移到配置顶层，或在devMiddleware内配置（根据你需要控制的日志范围选择）。
• 修正端口：把port从3000改为8080，匹配你的预期访问地址。

完成修改后，重新执行npm run dapp即可正常启动开发服务器，访问http://localhost:8080查看DApp界面。

内容的提问来源于stack exchange，提问作者saniya ikram