使用webpack获取目录中的所有路径

Question

我有一些前端代码需要为特定目录中的每个png运行。我正在使用Webpack但不确定如何使用它。

我意识到Webpack只运行服务器端，但这很好。我正在寻找的是一个变量，它是一个路径数组。我不想硬编码，因为有很多png文件。

理想情况下，我可以使用某种通用编译时命令将Javascript插入到结果中，如下所示：

var glob = require("glob")
var loadFiles = new Promise(funtion(resolve, reject) { 
  CompileTimeCommand(function() {
    glob("assets/tilesheet_images/*.png", function (er, paths) {
      if (err) { reject(err) } else { resolve(paths) }
    })
  })
})
loadFiles.then(function(paths) {
  // etc
})

问题是，CompileTimeCommand并不存在。

有没有办法可以用require或某种通用编译时宏系统来做到这一点？我之前编写过一个Webpack加载器，但是为一个简单的ad-hoc命令创建一个新包似乎有些过分。

有没有比制作一个运行dir glob的单独脚本更好的方法并将路径保存到我的程序读取的json文件中？

Answer 1

如果您需要在运行时获取文件列表并且可以在运行时更改，那么您宁愿使用后端技术访问文件系统并通过http将结果返回到前端举个例子 否则，如果文件是静态的并且在编译时确定，那么您可以在webpack配置文件中使用glob并将其结果放入DefinePlugin以将一些变量替换为文件列表。