Question

我试图让Webpack处理并复制我的src文件夹中的所有图像文件，然后使用＆＃39; image-webpack-loader＆＃39;将它们输出到build文件夹。据我所知，Webpack只会使用CSS / SASS / LESS中引用的图像或入口点来执行此操作。

我正在开发一个Symfony项目，并在twig模板中有很多引用，这些模板显然被忽略了。知道如何在不添加构建工具或为项目模板中包含的每个图像制作重复的参考文件的情况下实现这一目标吗？

Answer 1

在Web根目录下创建一个s子目录：

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%'
```
注意：
1. %protocol%根据您的环境是http或https
2. %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();

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

在Twig视图内，如下访问它们：

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

接受并点击这个很酷的答案！

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

1 个答案: