使用webpack预加载资产

时间:2015-12-06 20:30:07

标签: webpack preload image-preloader

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

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

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

我有一种感觉,这是一种我忽略的更好的方法,而且我正在寻找建议。

1 个答案:

答案 0 :(得分:0)

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

几年前,我在同一主题上发布了一个问题:Webpack plugin: how can I modify and re-parse a module after compilation?有人在那儿发布了一个答案,该答案使用了webpack的内部结构来尝试实现,但是我还没有尝试过;可能值得一看。