Webpack 开发服务器可以在我的项目根目录中创建文件吗？

Question

I have an project set up and running with Webpack 5.28.0 and webpack-dev-server 4.11.1

Its all working nicely but I would like to be able to have the dev server write some files back to my project root. These are debug/log files that I'd like to save as JSON. I'd also like this to be automatic, I don't want to have to click anything or trigger the action manually.

So the ideal flow would be that I run npm start , my build kicks off in a browser, the page generates a load of log data and this is then written back to my project root. Either using some browser function or calling back to Node script in my build.

Is this possible with dev-server?

Answer 1

You could setup the dev-server middleware to add an API endpoint to accept data and write it to your filesystem

// webpack.config.js

const { writeFile } = require("node:fs/promises");
const bodyParser = require("body-parser");

module.exports = {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      devServer.app?.post(
        "/__log",
        bodyParser.json(),
        async (req, res, next) => {
          try {
            await writeFile(
              "debug-log.json",
              JSON.stringify(req.body, null, 2)
            );
            res.sendStatus(202);
          } catch (err) {
            next(err);
          }
        }
      );
      return middlewares;
    },
  },
};

Then your front-end app needs only to construct the payload and POST it to the dev-server

const debugData = { /* ... */ };
fetch("/__log", {
  method: "POST",
  body: JSON.stringify(debugData),
  headers: { "content-type": "application/json" },
});