如何减少Webpack 4项目中webpack-dev-server的日志输出？

我完全懂你这种被大量不必要的构建日志刷屏的烦躁！在Webpack 4里调整webpack-dev-server的日志输出其实很简单，给你几个实用的方案，按需选择就行：

方法1：在webpack配置文件中自定义stats选项 #

这是最灵活的方式，你可以精确控制哪些日志信息要显示。在webpack.config.js的devServer字段里添加stats配置：

module.exports = {
  // ...其他Webpack配置
  devServer: {
    // 方案A：使用预设的日志级别
    stats: 'errors-only', // 仅在构建出错时显示日志
    // 可选的预设值还有：
    // 'minimal'：只显示构建成功/失败的关键信息，不展示模块、资源列表
    // 'none'：完全关闭构建日志（不推荐，会错过重要错误提示）
    
    // 方案B：自定义每一项日志的显示状态（更精细控制）
    // stats: {
    //   assets: false,       // 不显示资源列表
    //   chunks: false,       // 不显示代码块信息
    //   modules: false,      // 不显示模块列表（就是你示例里的那些[./node_modules/...]内容）
    //   entrypoints: false,  // 不显示入口文件信息
    //   builtAt: false,      // 不显示构建时间
    //   warnings: true,      // 保留警告信息
    //   errors: true         // 保留错误信息
    // }
  }
};

方法2：通过启动命令行参数调整 #

如果不想修改配置文件，可以直接在package.json的启动脚本里添加--stats参数：

{
  "scripts": {
    "start": "webpack-dev-server --mode development --stats errors-only"
  }
}

这里的--stats参数支持和配置文件里一样的预设值（比如minimal、errors-only）。

方法3：调整Webpack CLI的日志级别 #

你还可以通过--log-level参数控制整体日志的严重级别，只显示指定级别及以上的信息：

{
  "scripts": {
    "start": "webpack-dev-server --mode development --log-level warn"
  }
}

--log-level可选值包括：trace、debug、info、warn、error、silent。比如选warn的话，只会显示警告和错误信息，日常构建的成功提示都会被过滤掉。

根据你的需求选一个就行，推荐先用stats: 'minimal'试试，既能看到构建是否成功，又不会被冗余信息刷屏～

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