Webpack Dev Server能否自动在项目根目录创建JSON日志文件？

你的需求完全可以实现，核心思路是在浏览器端收集日志数据，通过webpack-dev-server的自定义中间件接收并写入项目根目录，下面是具体实现方案：

方案一：自定义dev server中间件 + 浏览器日志劫持 #

这是最直接的落地方案，分三步完成：

1. 给webpack-dev-server添加日志接收接口 #

在webpack.config.js中配置setupMiddlewares，新增一个POST接口，负责把收到的日志写入项目根目录的browser-logs.json文件：

const express = require('express');
const fs = require('fs').promises;
const path = require('path');

module.exports = {
  // 你的其他Webpack配置（entry、output等）
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) throw new Error('webpack-dev-server 未初始化');

      const app = express();
      app.use(express.json());

      // 接收前端日志的接口
      app.post('/api/save-logs', async (req, res) => {
        try {
          const { logs } = req.body;
          const logFile = path.resolve(__dirname, 'browser-logs.json');
          
          // 读取现有日志（文件不存在则初始化空数组）
          let existingLogs = [];
          try {
            const content = await fs.readFile(logFile, 'utf8');
            existingLogs = JSON.parse(content);
          } catch {}

          // 追加新日志并写入文件
          existingLogs.push(...logs);
          await fs.writeFile(logFile, JSON.stringify(existingLogs, null, 2));
          res.status(200).json({ success: true });
        } catch (err) {
          console.error('写入日志失败:', err);
          res.status(500).json({ success: false, error: err.message });
        }
      });

      // 挂载自定义中间件到dev server
      devServer.app.use(app);
      return middlewares;
    },
  },
};

2. 浏览器端收集并定时发送日志 #

在项目入口文件（比如src/index.js）中劫持console.log，保留原输出功能的同时收集日志，再定时发送给上面的接口：

const collectedLogs = [];

// 劫持console.log，收集日志
const originalLog = console.log;
console.log = (...args) => {
  originalLog(...args);
  // 把日志转成可JSON序列化的格式
  collectedLogs.push({
    timestamp: new Date().toISOString(),
    type: 'log',
    content: args.map(item => {
      try {
        return JSON.parse(JSON.stringify(item));
      } catch {
        return String(item); // 处理无法序列化的对象（如DOM元素）
      }
    })
  });
};

// 每5秒批量发送一次日志（可根据需求调整间隔）
setInterval(async () => {
  if (collectedLogs.length === 0) return;
  try {
    await fetch('/api/save-logs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ logs: collectedLogs }),
    });
    collectedLogs.length = 0; // 发送成功后清空缓存
  } catch (err) {
    console.error('日志发送失败:', err);
  }
}, 5000);

3. 验证效果 #

执行npm start启动项目后，浏览器页面的console.log输出会被自动收集，每隔5秒写入项目根目录的browser-logs.json文件，全程无需手动操作。

方案二：Webpack插件+日志接口（进阶，同时收集构建+页面日志） #

如果需要同时收集Webpack构建过程的日志和页面日志，可以自定义Webpack插件，配合方案一的逻辑实现：

class LogToFilePlugin {
  constructor() {
    this.logFile = '';
  }

  apply(compiler) {
    const fs = require('fs').promises;
    const path = require('path');
    this.logFile = path.resolve(compiler.context, 'all-logs.json');

    // 收集Webpack构建日志
    compiler.hooks.log.tap('LogToFilePlugin', (log) => {
      this.writeLog({
        timestamp: new Date().toISOString(),
        source: 'webpack-build',
        content: log
      });
    });

    // 同时挂载方案一中的日志接收接口，合并页面日志
    compiler.options.devServer.setupMiddlewares = (middlewares, devServer) => {
      if (!devServer) throw new Error('webpack-dev-server 未初始化');
      const app = express();
      app.use(express.json());
      app.post('/api/save-page-logs', async (req, res) => {
        try {
          for (const log of req.body.logs) {
            await this.writeLog({
              ...log,
              source: 'browser-page'
            });
          }
          res.status(200).json({ success: true });
        } catch (err) {
          console.error('写入页面日志失败:', err);
          res.status(500).json({ success: false });
        }
      });
      devServer.app.use(app);
      return middlewares;
    };
  }

  async writeLog(logEntry) {
    let logs = [];
    try {
      const content = await fs.readFile(this.logFile, 'utf8');
      logs = JSON.parse(content);
    } catch {}
    logs.push(logEntry);
    await fs.writeFile(this.logFile, JSON.stringify(logs, null, 2));
  }
}

// 在webpack.config.js的plugins数组中引入
module.exports = {
  plugins: [new LogToFilePlugin()]
};

注意事项 #

• 避免频繁写入：定时批量发送日志比单条发送更高效，减少磁盘IO压力
• 处理序列化异常：页面日志中可能包含无法JSON序列化的对象，需转成字符串或做兼容处理
• 并发写入保护：如果存在多请求同时写入的场景，建议用队列或锁机制避免文件损坏

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