Symfony Webpack/Encore 处理未引用的源图像

Question

我试图让 Webpack 处理和复制 src 中的所有图像文件文件夹并将它们输出到 build使用“image-webpack-loader”的文件夹。

据我了解，Webpack 只会对 CSS/SASS/LESS 或入口点中引用的图像执行此操作。

我正在处理一个 Symfony 项目，并且在 twig 模板中有很多引用，这些引用显然被忽略了。

知道如何在不添加构建工具或为项目模板中包含的每个图像制作重复引用文件的情况下实现这一点吗？

Answer 1

创建一个 s web根目录下的子目录:

Symfony 3:

web/s

Symfony 4 和 5:

public/s

配置您的新子域:

Symfony 3: ( app/config/config.yml )

framework:
    assets:
        base_urls:
            - '%protocol%://s.%host%'

Symfony 4 和 5: ( config/packages/assets.yaml )

framework:
    assets:
        base_urls:
            - '%protocol%://s.%host%'

笔记:

%protocol%要么是 http或 https根据您的环境

%host%是你的主人，也许example.com或者其他的东西。

配置 Webpack ( webpack.config.js )

Symfony 3:

var Encore = require('@symfony/webpack-encore');

Encore
    // ...
    .setOutputPath('./web/s/build/')
    .setPublicPath('/build')
    .setManifestKeyPrefix('build')
    .cleanupOutputBeforeBuild()
    // ...
;

module.exports = Encore.getWebpackConfig();

Symfony 4 和 5:

var Encore = require('@symfony/webpack-encore');

Encore
    // ...
    .setOutputPath('./public/s/build/')
    .setPublicPath('/build')
    .setManifestKeyPrefix('build')
    .cleanupOutputBeforeBuild()
    // ...
;

module.exports = Encore.getWebpackConfig();

把你所有的图片放在里面 /web/s或 /public/s根据您的 Symfony 版本。

在你的 Twig View 中，像下面一样访问它们:

<img src="{{ asset('photo.jpg') }}" alt="Photo"/>

接受并为这个很酷的答案点赞!