将异步加载的数据传递到Webpack中的pug-html-loader

Question

常规设置

我建立一个小的网站的WebPack和哈巴狗在此基础上真棒样板： https://github.com/alexnoz/webpack-pug-scss-boilerplate.git

该项目已启动并正在运行，我能够正确渲染哈巴狗文件。

需求

现在，在所有webpack编译发生之前，我需要加载一些数据。我想按照此回答的问题将数据传递给pug-html-loader 。

问题/疑问

我的问题是，我必须异步加载该数据。所以我有一个承诺。如何确保在完成webpack编译之前完成了诺言？

这是我目前无法使用的方法

// in webpack.config.js

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

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

pug-html-loader接受options.data如果我把静态数据存在，那么这个数据是可用的哈巴狗模板中。

我知道我的问题似乎是，在Webpack编译发生之前，我的Promise尚未解决。但是如何使Webpack以某种方式“等待” Promise解决呢？

我已经尝试注册webpack事件挂钩。但是没有成功。还有其他建议吗？

Answer 1

就如此容易：

module.exports = () => {
  return loadSomeDataAsync().then(function(loadedData) {

        return {
          entry:  './app.js',
          ...
          options {
            data: loadedData
          }
          ...
        }
  });
};

请注意，文档中的 setTimeout() 仅用于说明目的（模拟获取数据时的延迟）。

等待的怎么样了？在内部，他们必须使用 async + wait。

例如，为了帮助您更好地理解，请查看以下代码（再次用于说明目的）：

module.exports = () => {
  return loadSomeDataAsync().then(function(loadedData) {

        return {
          entry:  './app.js',
          ...
          options {
            data: loadedData
          }
          ...
        }
  });
};