将异步加载的数据传递给 webpack 中的 pug-html-loader答案

【问题标题】：Pass asynchronously loaded data to pug-html-loader in webpack将异步加载的数据传递给 webpack 中的 pug-html-loader
【发布时间】：2019-09-16 12:03:08
【问题描述】：

常规设置

我正在使用 webpack 和 pug 基于这个很棒的样板构建一个小型网站： https://github.com/alexnoz/webpack-pug-scss-boilerplate.git

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

要求

现在我需要在所有 webpack 编译发生之前加载一些数据。我想按照this answered question 中的说明将该数据传递给 pug-html-loader。

问题/疑问

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

这是我目前行不通的方法

// in webpack.config.js

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

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

pug-html-loader 接受options.data 如果我将静态数据放在那里，那么这些数据在 pug 模板中可用。

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

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

【问题讨论】：

标签： javascript node.js webpack pug-loader

【解决方案1】：

这种情况的默认模式如下所示：

const configPromise = new Promise(function(resolve, reject) {
  setTimeout(() => { resolve(webpackConfig) }, 1000);
});

configPromise
  .then(webpack) // Passes the config to webpack
  .then(compiler => {
    // Do the work with the compiler
  });

该功能在DOCS 中有详细记录。

Webpack 会运行配置文件导出的函数，并等待返回一个 Promise。 在您需要时很方便异步加载配置变量。

module.exports = () => {
  return new Promise((resolve, reject) => { // The promise could be an XHR call using fetch, Axios or whatever
    setTimeout(() => { 
      resolve({ // Resolve webpack config
        entry: './app.js',
        /* ... */
      });
    }, 5000);
  });
};

【讨论】：

【解决方案2】：

就这么简单：

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

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

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

它在等待什么？在内部，他们必须使用 async + await。

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

function simulateLoadData() { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("data"); // once I get the data, I pass it through resolve
    }, 2000); // just for illustration purposes and simulate query to remote machine
  });
}

function getConfig() {
  return simulateLoadData().then(function(dataLoaded){ // here I retrieve the data resolved
    return { data: dataLoaded }; // I can pass dataLoaded to my config
  });
}

async function app() {
    var config = await getConfig(); // here is where I retrieve the returned config
    console.log("config", config); // config > Object { data: "data" } 
}

app();

【讨论】：