如何将Webpack 5的控制台输出格式调整为Webpack 1风格的输出结构

问题背景 #

我当前使用Webpack 5.47.0版本，执行构建命令：

$ webpack --progress --config webpack.config.test.js

控制台输出如下：

{ NODE_ENV: 'development' }
{ WEBPACK_BUNDLE: true, WEBPACK_BUILD: true }
按状态分类的资源：1.46 MiB [已缓存] 8个资源
按路径分类的资源：1.58 KiB
  资源 css/styles.css 1.01 KiB [已对比待输出] (名称: main)
  1个关联资源
  资源 index.html 584字节 [已对比待输出]
入口点 main 543 KiB (1.58 MiB) = runtime.0a95cdc1c076b6c7fd14.js 6.7 KiB vendors.8175084d63678640b295.js 532 KiB css/styles.css 1.01 KiB main.cd02394e31eece531e82.js 3.54 KiB
9个辅助资源
运行时模块 3.39 KiB 7个模块
可缓存模块 533 KiB (javascript) 568字节 (css/mini-extract)
  javascript模块 533 KiB
    路径为../的模块 531 KiB
      ../node_modules/lodash/lodash.js 531 KiB [已构建] [代码已生成]
      ../css/app.css 50字节 [已构建] [代码已生成]
      ../css/app1.css 50字节 [已构建] [代码已生成]
    路径为./.js的模块 1.43 KiB
      ./index.js 1.03 KiB [已构建] [代码已生成]
      ./testC.js 409字节 [已构建] [代码已生成]
  css模块 568字节
    css ../node_modules/css-loader/dist/cjs.js!../css/app.css 522字节 [已构建] [代码已生成]
    css ../node_modules/css-loader/dist/cjs.js!../css/app1.css 46字节 [已构建] [代码已生成]
webpack 5.47.0 编译成功，耗时1178毫秒
总耗时2.12秒。

我希望将输出调整为Webpack 1风格的结构：

Hash: aaaf5afc6582f3222f55
Version: webpack 1.12.14
Time: 1175ms
Asset       Size  Chunks             Chunk Names
index.js  677 kB       0  [emitted]  main
chunk    {0} index.js (main) 643 kB [rendered]
    [0] ./src/app.js 574 bytes {0} [built] [1 error]
    [1] ./~/react/react.js 56 bytes {0} [built]
    [2] ./~/react/lib/React.js 1.49 kB {0} [built]
    [3] ./~/react/lib/ReactDOM.js 3.71 kB {0} [built]
    [4] ./~/process/browser.js 2.06 kB {0} [built]

请问如何实现这一格式调整？

解决方案 #

要实现Webpack 5输出格式向Webpack 1的转换，有两种主要方式：

方法1：通过内置stats配置调整（简便快捷） #

Webpack 5提供了高度可定制的stats配置项，可以通过修改配置文件或命令行参数来模拟Webpack 1的输出结构。

配置文件方式

在你的webpack.config.test.js中添加以下stats配置：

module.exports = {
  // 你的其他Webpack配置（entry、output、module等）
  stats: {
    preset: 'none', // 禁用默认预设，从头构建输出格式
    hash: true, // 显示构建Hash值
    version: true, // 显示Webpack版本
    timings: true, // 显示编译耗时
    assets: true, // 展示资源列表
    chunks: true, // 展示Chunk信息
    chunkModules: true, // 展示每个Chunk包含的模块
    assetsSort: 'name', // 按名称排序资源
    chunkModulesSort: 'id', // 按ID排序Chunk内的模块
    chunksSort: 'id', // 按ID排序Chunk
    // 关闭Webpack 5新增的、Webpack 1没有的输出项
    env: false,
    entrypoints: false,
    chunkOrigins: false,
    moduleTrace: false,
    builtAt: false,
    cached: false,
    cachedAssets: false,
    performance: false,
    errorDetails: false,
  }
};

命令行方式

如果不想修改配置文件，可以直接在构建命令中添加--stats参数指定输出选项：

$ webpack --progress --config webpack.config.test.js --stats "hash,version,timings,assets,chunks,chunkModules,assetsSort:name,chunkModulesSort:id"

方法2：自定义Stats插件（完全复刻格式） #

如果需要完全匹配Webpack 1的输出样式，可以编写一个自定义Webpack插件，拦截构建完成后的Stats数据，按照Webpack 1的格式手动输出。

自定义插件代码

在你的webpack.config.test.js中添加以下插件：

// 自定义LegacyStatsPlugin，模拟Webpack 1输出格式
class LegacyStatsPlugin {
  apply(compiler) {
    // 监听构建完成事件
    compiler.hooks.done.tap('LegacyStatsPlugin', (stats) => {
      // 提取需要的Stats数据
      const statsData = stats.toJson({
        hash: true,
        version: true,
        timings: true,
        assets: true,
        chunks: true,
        modules: true,
      });

      // 按照Webpack 1的格式输出
      console.log(`Hash: ${statsData.hash}`);
      console.log(`Version: webpack ${statsData.version}`);
      console.log(`Time: ${Math.round(statsData.time)}ms`);
      console.log('Asset       Size  Chunks             Chunk Names');
      
      // 输出资源列表
      statsData.assets.forEach(asset => {
        const chunkInfo = statsData.chunks.find(chunk => chunk.id === asset.chunks[0]);
        const chunkId = asset.chunks.join(', ');
        const chunkName = chunkInfo?.names?.join(', ') || '';
        const size = `${(asset.size / 1024).toFixed(2)} kB`;
        // 对齐格式（模拟Webpack 1的排版）
        console.log(`${asset.name.padEnd(12)} ${size.padStart(6)}       ${chunkId.padStart(2)}  [emitted]  ${chunkName}`);
      });

      // 输出Chunk及包含的模块
      statsData.chunks.forEach(chunk => {
        const chunkSize = `${(chunk.size / 1024).toFixed(2)} kB`;
        console.log(`chunk    {${chunk.id}} ${chunk.files.join(', ')} (${chunk.names.join(', ')}) ${chunkSize} [rendered]`);
        
        // 输出模块列表
        chunk.modules.forEach((module, idx) => {
          const moduleSize = `${(module.size / 1024).toFixed(3)} kB`;
          console.log(`    [${idx}] ${module.name} ${moduleSize.padStart(8)} {${chunk.id}} [built]`);
        });
      });
    });
  }
}

// 在Webpack配置中注册插件
module.exports = {
  // 你的其他Webpack配置
  plugins: [
    new LegacyStatsPlugin()
  ],
  stats: 'none' // 关闭默认输出，只使用自定义插件的输出
};

注意事项 #

• 方法1的配置可以根据你的需求微调，比如添加warnings: true来显示警告，或者调整排序方式；
• 方法2的插件可以进一步优化格式对齐、错误信息展示等细节，完全匹配Webpack 1的输出；
• 如果使用了mini-css-extract-plugin等CSS分离插件，需要在插件中额外处理CSS资源的展示，确保和Webpack 1的资源列表一致。

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