Webpack5 hooks中如何等待异步代码执行完成后再进入编译下一步

你可以选择以下两种任意一种写法实现等待异步逻辑执行完成后再推进编译流程： #

方案1：使用tapPromise（更适配async/await语法，推荐） #

webpack钩子针对返回Promise的异步逻辑提供了专门的tapPromise注册方式，webpack会自动等待返回的Promise状态变更后再执行后续流程，无需手动管理回调：

plugins: [
  {
    apply(compiler) {
      compiler.hooks.beforeCompile.tapPromise(
        'GetLanguagesPlugin',
        async (_) => {
          // 等待异步登录逻辑执行完成
          const res = await loginUser({ core, email, password })
          // 逻辑执行完成后无需额外操作，async函数默认返回resolve状态的Promise
          // 若需要终止编译，直接抛出错误即可：throw new Error('登录失败')
        }
      )
    }
  }
]

方案2：修正tapAsync写法 #

如果你要继续使用回调模式的tapAsync，需要补充异常捕获逻辑，确保异步操作无论成功失败都会调用callback，避免流程卡住：

plugins: [
  {
    apply(compiler) {
      compiler.hooks.beforeCompile.tapAsync(
        'GetLanguagesPlugin',
        async (_, callback) => {
          try {
            const res = await loginUser({ core, email, password })
            // 异步操作成功，调用callback推进流程
            callback()
          } catch (err) {
            // 异步操作失败，将错误传入callback终止编译
            callback(err)
          }
        }
      )
    }
  }
]

注意事项 #

• 不要同时混用callback调用和返回Promise的写法，避免钩子逻辑混乱
• 异步逻辑的异常必须抛出或传入callback，否则会出现编译卡住无响应的问题

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