使用webpack预加载资产

Question

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

我的第一个倾向是创建一个新的加载器与文件加载器(我目前用于图像)链接在一起.新的加载器将跟踪我的图像并将其保存到数组形式的JS文件中,我的预加载器将导入该文件.但我意识到这可能不会起作用,因为预加载器会依赖于在构建时生成的文件.

我的停止间隙解决方案是一次构建项目,从生成的图像目录生成数组,将其复制回预加载器,然后再次构建.

我觉得有一个更好的方法,我忽略了,我正在寻找建议.

Answer 1

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

几年前我就同一主题发布了一个问题：Webpack 插件：编译后如何修改和重新解析模块？有人确实在那里发布了一个答案，它使用 webpack 的内部结构来尝试以我尚未尝试过的方式来完成此任务；也许值得一瞧。