使用 webpack 预加载资源

Question

我有一个预加载器，它接收一组图像 URL，并在我的应用打开后立即开始加载文件。每次我在图像上使用 require() 时，我都希望 webpack 将该图像的 URL 添加到我的预加载器将使用的数组中。

我的第一个想法是创建一个新的加载器以与文件加载器（我目前用于图像）链接在一起。新的加载器将跟踪我的图像并将它们以数组的形式保存到一个 JS 文件中，我的预加载器将导入该文件。但我意识到这可能行不通，因为预加载器会依赖于构建时生成的文件。

我的权宜之计是构建一次项目，从生成的图像目录生成数组，将其复制回预加载器，然后再次构建。

我感觉有一种更好的方法被我忽略了，我正在寻找建议。

Answer 1

我认为真的没有更好的解决方案。这种希望在包中包含仅在编译完成后才完成的内容的模式经常出现。我花了一段时间研究它，我想出的最好的方法是将生成的资产包含为 webpack external，这意味着在运行时单独加载该资产。至少这种方式 webpack 仍然知道它并将其识别为依赖项，即使它不是编译的一部分。

几年前我发布了一个关于同一主题的问题：Webpack plugin: how can I modify and re-parse a module after compilation? 有人确实在那里发布了一个答案，它使用 webpack 的内部结构来尝试以一种我还没有尝试过的方式来实现这一点；可能值得一看。