怎样写一个异步创建文件，然后该文件会加入到当前打包流程的webpack插件？

Question

现在有这样的一个需求：

我想写一个webpack 插件，可以在打包构建前，通过 ajax 请求，获取数据，然后创建一个 a.json 文件放置到 src 目录下，可以在 main.js 里 import a.json。

我这样写，虽然可以创建文件，但是打包的时候会报 no such file or directory：

class FileCopyPlugin {
  constructor () {
    this.cache = []
  }
  apply(compiler) {
    compiler.hooks.beforeRun.tapAsync('FileCopyPlugin', (compilation, callback) => {
      setTimeout((function () {
        fs.writeFileSync('/src/a.json', JSON.stringify({
          test: 1
        }, null, 2))
        callback()
      }), 1000)
    })
  }
}

main.js

import a from './a.json'

Answer 1

beforeRun不是异步的吗？ 可以用tapAsync,你用tap根本没有callback吧

Answer 2

这是业务需求吧,还是改webpack配置比较简单.

webpack命令行支持函数,该函数应返回promise,将原本直接导出的配置resolve出去即可;

你可以另写一个build.js,引入原先的webpack配置文件,然后将你的异步请求以及写入a.json的业务放到这里,完成之后resolve(webpackConfig);
然后修改package.json里原本指向webpack配置文件的script改成指向新的build.js