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

Question

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

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

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

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

Answer 1

1. s在web根目录下创建一个子目录：

   交响乐3：

   web/s
   

   交响乐 4 和 5：

   public/s
   

2. 配置您的新子域：

   交响乐 3: ( app/config/config.yml)

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

   交响乐 4 和 5：( config/packages/assets.yaml)

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

   笔记：

   1. %protocol%是http或https根据您的环境
   2. %host%是你的主人，也许example.com什么的。

3. 配置 Webpack ( webpack.config.js)

   交响乐3：

   var Encore = require('@symfony/webpack-encore');
   
   Encore
       // ...
       .setOutputPath('./web/s/build/')
       .setPublicPath('/build')
       .setManifestKeyPrefix('build')
       .cleanupOutputBeforeBuild()
       // ...
   ;
   
   module.exports = Encore.getWebpackConfig();
   

   交响乐 4 和 5：

   var Encore = require('@symfony/webpack-encore');
   
   Encore
       // ...
       .setOutputPath('./public/s/build/')
       .setPublicPath('/build')
       .setManifestKeyPrefix('build')
       .cleanupOutputBeforeBuild()
       // ...
   ;
   
   module.exports = Encore.getWebpackConfig();
   

4. 将所有图像放入其中/web/s或/public/s根据您的 Symfony 版本。

5. 在 Twig 视图中，按如下方式访问它们：

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

6. 接受并点赞这个很酷的答案！