运行 npm run dev 后如何响应错误信息？答案

【问题标题】：How do I respond to the error message after running npm run dev?运行 npm run dev 后如何响应错误信息？
【发布时间】：2021-11-04 07:23:06
【问题描述】：

我想使用以下 URL 中的模板创建本地开发环境。我正在尝试按照步骤操作。当我运行 npm run dev 时，出现错误。我不知道在这种情况下该怎么办。有人可以帮我吗？

网址：https://github.com/puikinsh/Adminator-admin-dashboard

[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 'stats'. These properties are valid:                                                                                              │┌─Operation────────────────────────────────────────────┐ 
│    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.config.js

const path = require('path'); 
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 
const { loader } = require('mini-css-extract-plugin'); 

module.exports = { 
  entry:'./src/javascripts/main.js', 
  output: { path: path.resolve(__dirname, './dist'), 
  filename: 'javascripts/main.js' },
  module: { 
    rules:[ 
      { test:/\.css/, 
        use:[ { loader:MiniCssExtractPlugin.loader, }, { loader:'css-loader', }]
      }, 
      { test: /\.(png|jpg)/,
        type: 'asset/resource', 
        generator: { filename: 'images/[name][ext]', }, 
        use:[ 
          { loader: 'file-loader',
            options:{ esModule:false, 
            name:'images/[name].[ext]'
          }]
       },
       { test: /\.pug/, 
         use: [
           { loader:'html-loader', }, 
           { loader:'pug-html-loader' }
           ]
        }]
       },
  plugins: [ 
    new MiniCssExtractPlugin({ filename:'./stylesheets/main.css' }), 
    new HtmlWebpackPlugin({ template: './src/templates/index.html' }), 
    new CleanWebpackPlugin() 
    ]},

devServer.js

// ---------------------
// @Loading Dependencies
// ---------------------

const
  manifest = require('./manifest');


// ------------------
// @DevServer Configs
// ------------------

/**
 * [1] : To enable local network testing
 */

const devServer = {
  contentBase        : manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
  historyApiFallback : true,
  port               : manifest.IS_PRODUCTION ? 3001 : 3000,
  compress           : manifest.IS_PRODUCTION,
  inline             : !manifest.IS_PRODUCTION,
  watchContentBase: true,
  hot                : !manifest.IS_PRODUCTION,
  host               : '0.0.0.0',
  disableHostCheck   : true, // [1]
  overlay            : true,
  stats: {
    assets     : true,
    children   : false,
    chunks     : false,
    hash       : false,
    modules    : false,
    publicPath : false,
    timings    : true,
    version    : false,
    warnings   : true,
    colors     : true,
  },
};


// -----------------
// @Exporting Module
// -----------------

module.exports = devServer;

【问题讨论】：

const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');常量 HtmlWebpackPlugin = require('html-webpack-plugin');常量 {CleanWebpackPlugin} = 要求（'clean-webpack-plugin'）; const { loader } = require('mini-css-extract-plugin'); module.exports = { entry:'./src/javascripts/main.js', output:{ path: path.resolve(__dirname, './dist'), filename: 'javascripts/main.js' },跨度>
module:{ rules:[ { test:/\.css/, use:[ { loader:MiniCssExtractPlugin.loader, }, { loader:'css-loader', }, ], },
{ test: /\.(png|jpg)/, type: 'asset/resource', generator: { filename: 'images/[name][ext]', }, use:[ { loader: 'file-loader', options:{ esModule:false, name:'images/[name].[ext]', }, }, ], },
{ 测试: /\.pug/, 使用: [ { loader:'html-loader', }, { loader:'pug-html-loader', }, ], }, ], }，插件：[新的 MiniCssExtractPlugin({ filename:'./stylesheets/main.css', }), new HtmlWebpackPlugin({ template: './src/templates/index.html', }), new CleanWebpackPlugin(), ], }
上面四篇帖子都是webpack.config.js的内容。由于文字数量，我将它们分为四个帖子。如果将它们放在一个文件中，则结果是从顶部的帖子 webpack.config.js 开始。

标签： node.js npm webpack

【解决方案1】：

该消息是不言自明的。您的配置文件无效，因为您在 webpack 对象中使用了未知键（此处为 stats）。请发布您的整个 webpack 配置，以便人们检查错误。

【讨论】：

我粘贴了webback.config.js的全部内容。你确定吗？
我已经编辑了您的帖子，以便提供格式正确的配置。我在这里看不到任何stats。你确定配置完成了吗？
感谢整合源码。看起来您缺少大约四个右括号。除此之外，源代码与此处的 webpack.config.js 源代码相同。