Symfony WebpackEncore处理未引用的源图像。

Question

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

据我所知，Webpack只对CSSSASSLESS或入口点中引用的图片做这个处理。

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

有什么办法可以让我在不添加构建工具或为项目模板中包含的每张图片制作一个重复的引用文件的情况下实现这个功能？

Answer 1

1. 创建一个 s web根目录下的子目录。

   Symfony 3:

   web/s
   

   Symfony 4 & 5:

   public/s
   

2. 配置你的新子域。

   Symfony 3: Symfony 4 & 5: 配置你的新子域： (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%'
   

   注意：

   1. %protocol% 要么是 http 或 https 符合你的环境
   2. %host% 是你的主人，也许 example.com 或其他什么。

3. 配置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();
   

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

5. 在你的Twig视图里面，像下面这样访问它们。

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

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