来自非标准图像参考的 Webpack 图像捆绑答案

【问题标题】：Webpack image bundling from a non-standard image reference来自非标准图像参考的 Webpack 图像捆绑
【发布时间】：2019-11-26 05:08:08
【问题描述】：

我正在使用 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> 插入到 DOM 中，例如 createElement('img') 和 img.src = this.imageSource。

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

我还尝试在使用 CustomAttribute 的视图模型中使用 require 语句，虽然图像确实被添加到包中，但标记中对图像的真正引用并没有像它那样正确替换如果是标准的<img src="">。

我还探索了如何更改 src 在 CustomAttribute 中的设置方式以使用 requires(this.imageSource)。这会导致 Webpack 对“关键依赖项”发出警告（因为依赖项在理论上是动态的）并且图像没有被捆绑。

我意识到我可以配置复制文件插件来复制我需要的图像，但我希望加载器检测上面的image-source，捆绑图像（通过url-loader 或file-loader）并将引用替换为标准src。有没有办法通过组合内置加载器来实现这一点，或者是否需要一个或多个自定义加载器？还是我应该探索以更“友好”的方式包含图像资源？

【问题讨论】：

标签： javascript html webpack aurelia

【解决方案1】：

几个选项，我相信还有更多方法：

（难度：高）编写自己的 webpack loader/extend html-loader 插件来解析它
（难度：容易）将图像源分解为它自己的属性，从当前属性中解析该属性，然后在 html-loader 中使用 attr 选项，以便 webpack 找到/包含它：https://github.com/webpack-contrib/html-loader#advanced-options
（难度：容易）将图像放置在构建时复制的静态文件目录中，aurelia cli webpack 脚手架项目已经这样做了，因此您可以在其中包含图像。我相信它们只会在启动 au run 时被复制一次，因此如果您添加新图像，则必须重新启动它。

【讨论】：

谢谢。当我写这个问题时，我做了类似于三的事情，只是为了畅通无阻。这并不理想，因为它需要我以不同于应用程序中所有其他图像的方式处理这些图像，例如，隔离到它们自己的路径或每次修改 Webpack 复制插件。我相信 2 会要求我将 CustomAttribute 重写为其他内容（因为它将是两个属性）。