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

Question

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

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

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

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

Answer 1

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

   Symfony 3：

   web/s
   

   Symfony 4 和 5：

   public/s
   

2. 配置您的新子域：

   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%'
   

   笔记：

   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. 接受并为这个很酷的答案点赞！

Answer 2

在webpack.config.js中，您可以添加.copyFiles()到 Encore 对象。这将采用带有“from”和“to”键的对象，以及几个通配符。

这是一个例子：

.copyFiles({
    from: 'src',
    to: 'images/[path][name].[ext]'
})