Symfony 4 webpack + encore 在模板中处理图像答案

【问题标题】：Symfony 4 webpack + encore handle image in templateSymfony 4 webpack + encore 在模板中处理图像
【发布时间】：2017-12-31 11:19:08
【问题描述】：

使用带有 Webpack + Encore + Yarn 的 Symfony 4，我想在我的模板中处理图像，而我并不是真的如何实现这一点。

我将我的图像放在我的/assets/img/logo.png 文件夹中，并在我的webpack.config.js 中使用它：

.addEntry('logo', './assets/img/logo.png')

在我跑完之后：

yarn run encore dev

生成/public/build/logo.js 和/public/build/images/logo.aez323a.png 文件。

我的问题，有没有办法将 Symfony asset() 函数链接到文件名中带有哈希的文件名？还是应该使用其他方式在模板中使用图像？

【问题讨论】：

【解决方案1】：

您似乎已启用版本控制 .enableVersioning() ，每次运行 yarn run encore dev 时，都应在输出路径中创建一个 manifest.json 文件，根据您的问题，此路径为 /公共/构建。所以你必须在你的设置中添加以下配置

config/packages/framework.yaml

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

然后您将能够使用按名称引用的asset() 函数，例如asset('public/images/logo.png')

你可以在 symfony 文档here中找到这些信息

【讨论】：

非常好的和干净的答案，我没有在文档中找到它，我的错。
另外我想你会对在 wehbpack-encore git 存储库github.com/symfony/webpack-encore/issues/24 上的这个对话感兴趣，它是关于使用 webpack 处理静态资产

【解决方案2】：

简而言之，您将图像放在 /assets/images （或任何其他）中，在构建时插件将此文件夹复制到 /public/build 具有相同的子文件夹结构。您需要做的就是向 /webpack.config.js 添加一些字符串 - 使用“from”和“to”变量激活插件。

在 twig 中，像往常一样将这些图像与 {{asset(path_in_public) }} 一起使用。

如果你启用开发服务器进行热重载

$ yarn encore dev-server

即使 /public 中没有物理副本，来自 /assets/images 的文件也将在 twig 模板中可用。

执行时文件将被物理复制

$ yarn encore prod

【讨论】：