Best way to run asynchronous code during a webpack build?

Question

During my build, I need to download files over HTTP, process them, and finally save them as part of the resulting bundle (I'm not writing a reusable plugin, so saving to hardcoded paths that I know to be the build's output location is fine).

Currently I'm doing it before exporting the config:

fetchFilesFromInternetAndProcessThem().then(
  () => console.info("Successfully fetched, processed & included external files in the build."),
  e => console.error("Failed to include external files in the build.", e)
);

module.exports = {
  target: "node",
  stats: "minimal",
  ...

However, if the promise fails, the build will obviously still succeed... which is bad because those files are required for the successful running of my application.

Is there a plugin I can use (or other solution) that allows arbitrary asynchronous code execution before/after a build, and will fail the build if said asynchronous code fails?

Do you need to feed that downloaded files to webpack or e.g. you just need to download them and copy to some output dir? — Petr Averyanov, Mar 05 '21 at 15:09
Download the file, process it using custom code (basically converting the downloaded JWK to a PEM), then copy to output dir. Webpack does not need them for anything it's doing. — Lawrence Wagerfield, Mar 05 '21 at 19:52
then u can just start 2 simultaneous processes - webpack build + your download, e.g. https://stackoverflow.com/questions/30950032/how-can-i-run-multiple-npm-scripts-in-parallel — Petr Averyanov, Mar 05 '21 at 20:33

score 0 · Answer 1 · answered Mar 05 '21 at 22:22

I created my own plugin in the end.

If myFunc throws an error, then the build fails, which is what I want:

class RunPromiseWebpackPlugin {
  asyncHook;
  constructor(asyncHook) {
    this.asyncHook = asyncHook;
  }

  apply(compiler) {
    compiler.hooks.beforeCompile.tapPromise("RunPromiseWebpackPlugin", this.asyncHook);
  }
}


async function myFunc() {
  // Does asynchronous stuff.
}

module.exports = {
  target: "node",
  stats: "minimal",
  plugins: [
    new RunPromiseWebpackPlugin(myFunc),
  ],
  ...
}

Best way to run asynchronous code during a webpack build?

1 Answers1