Pass asynchronously loaded data to pug-html-loader in webpack

General setup

I am building a small website with webpack and pug based on this awesome boilerplate: https://github.com/alexnoz/webpack-pug-scss-boilerplate.git

The project is up and running and I am able to render pug files correctly.

Requirement

Now I need to load some data before all the webpack compiling happens. I want to pass that data to the pug-html-loader as described in this answered question.

Problem/Question

My problem is, that I have to load that data asynchronically. So what I have is a Promise. How can I make sure that the promise is finished before webpack compile happens?

This is my current aproach that doesn't work

// in webpack.config.js

var myData = []
loadSomeDataAsync().then(loadedData => myData = loadedData)

{
  loader: 'pug-html-loader',
  options: {
    data: myData    // <==== 
  }
}

pug-html-loader accepts the options.data If I put static data there, then this data is available inside the pug template.

I know that my problem seems to be, that my Promise is not yet resolved, before the webpack compile happens. But how can get webpack to somehow "wait" for the Promise to resolve?

I already tried to register webpack event hooks. But did not succeed. Any further suggestions?

from Pass asynchronously loaded data to pug-html-loader in webpack