Question

我正在使用Webpack捆绑我的Aurelia应用程序。我编写了一个自定义属性，该属性对应用了该元素的任何元素提供视差效果。它真的很好。我不确定如何让Webpack在我的标记中检测图像引用并捆绑引用的图像。

<div id="hero" scroll-parallax="image-extend: 50; image-file-height: 2688; image-file-width: 4000; image-source: ../media/hero.jpg; background-position: center top;">

在Aurelia生命周期中，图像作为子<img>元素（例如createElement('img')和img.src = this.imageSource）插入到DOM中。

我使用html-loader.attrs进行了探索，但是从我的初始测试中，它尝试使用整个属性值，而不是解析该属性以获得图像值。

我还试图在使用CustomAttribute的视图模型中使用require语句，并且在将图像添加到包中的同时，未正确替换标记中对图像的真实引用，例如如果它是标准的<img src="">。

我还探讨了如何更改如何将src在CustomAttribute中设置为使用requires(this.imageSource)。这会导致Webpack警告“严重的依赖项”（由于依赖关系的理论动态性质），并且图像未捆绑在一起。

我意识到我可以配置复制文件插件来复制所需的图像，但是我希望加载程序能够检测到上面的image-source，然后将图像打包（通过url-loader或file-loader），然后将其替换为标准src。有没有办法结合使用内置的装载机来完成此任务，还是需要一个或多个定制装载机？还是应该探索以一种更加“友好”的Webpack方式包含图像资源？

Answer 1

有几个选项，我敢肯定还有更多方法：

（难点：高），编写自己的webpack加载器/扩展html-loader插件进行解析
（难度：容易），将图像源分解为自己的属性，从您当前的属性中解析该属性，然后在html-loader中使用attr选项，以便webpack可以找到/包含它：{{3} }
（困难：容易）将图像放置在静态文件目录中，该目录在构建时复制，aurelia cli webpack脚手架项目已经执行了此操作，因此您只需在其中包含图像即可。我相信在启动au run时，它们只会被复制一次，因此，如果添加新图像，则必须重新启动它。

从非标准图像参考中捆绑Webpack图像

1 个答案: