如何配置webpack使其仅显示错误信息或变更文件？

Hey there! I totally feel your pain—wading through a flood of irrelevant output just to catch errors or see which files changed is super frustrating. The good news is we can absolutely tweak your Webpack config to show only what matters. Let's break this down step by step.

1. Adjust Webpack's Core stats Configuration #

Since you're using Webpack's watch mode, the main output comes from Webpack itself, not just the dev server. Adding a top-level stats field to your config will control what gets logged during builds and watch updates.

Option A: Minimal Output (Errors + Warnings Only) #

If you want to see only errors and warnings (no file change notifications), use this preset value:

const config = {
  // ... rest of your config
  stats: "errors-only"
};

Option B: Custom Output (Errors + Changed Files) #

If you also want to see which files were modified during watch updates, use a custom stats object to cherry-pick exactly what's displayed:

const config = {
  // ... rest of your config
  stats: {
    // Show critical errors and warnings
    errors: true,
    warnings: true,
    // Show modules (files) that were changed/processed
    modules: true,
    // Hide all redundant noise
    chunks: false,
    chunkModules: false,
    assets: false,
    entrypoints: false,
    builtAt: false,
    hash: false,
    // Optional: Keep module names concise
    moduleNames: false
  }
};

2. Refine DevServer's stats (If Using webpack-dev-server) #

Your current dev server config already has stats: { chunks: false }, but you can align it with the core stats settings for consistency. Update it to match the custom config above, or use a preset:

devServer: {
  contentBase: "./dist",
  stats: "errors-only" // or the custom object from Option B
}

Modified Webpack Config Snippet #

Here's how your updated config will look with the custom stats setup (combining both core and dev server settings):

const webpack = require("webpack");
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  context: path.resolve(__dirname),
  entry: "./index.js",
  devServer: {
    contentBase: "./dist",
    // Align dev server stats with core config
    stats: {
      errors: true,
      warnings: true,
      modules: true,
      chunks: false,
      chunkModules: false,
      assets: false,
      entrypoints: false,
      builtAt: false,
      hash: false
    }
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      { 
        test: /\.js$/,
        include: path.resolve(__dirname),
        use: [
          { 
            loader: "babel-loader",
            options: { presets: [["@babel/env", { modules: false }], "@babel/react"] }
          }
        ]
      },
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { 
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ],
    noParse: [/aws-sdk/]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      "process.env.STATIC_PORT": JSON.stringify(process.env.STATIC_PORT),
      VERSION: JSON.stringify(require("./package.json").version)
    }),
    new MiniCssExtractPlugin({ filename: 'bundle.css' }),
    new CopyWebpackPlugin([{ from: "./cb_icons", to: "cb_icons" }])
  ],
  node: { fs: "empty" },
  externals: [{ "./cptable": "var cptable" }, { "./jszip": "jszip" }],
  performance: { hints: false },
  watchOptions: { ignored: ['node_modules'], poll: 1000 },
  // Add core stats config for watch mode
  stats: {
    errors: true,
    warnings: true,
    modules: true,
    chunks: false,
    chunkModules: false,
    assets: false,
    entrypoints: false,
    builtAt: false,
    hash: false
  }
};

module.exports = config;

How This Works #

• The core stats config controls output from Webpack's watch mode—now it will only log:
  • Errors that break the build
  • Warnings that need your attention
  • The specific modules (files) that were modified or processed
• All other noise like chunk details, asset lists, build timestamps, etc., is hidden.

This should make it way easier to spot errors and track which files are being updated without getting overwhelmed!

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