symfony 4 webpack + encore处理模板中的图像更多信息

Question

喜欢这个问题:

使用Symfony 4和Webpack + Encore + Yarn,我想在我的模板中处理图像,而我真的不知道如何实现这一点.

我将我的图像放在/assets/img/logo.png文件夹中,并在我的webpack.config.js中使用它:

.addEntry('logo','./ assets/img/logo.png')

在我跑完之后:

纱线运行安可开发

这会生成/public/build/logo.js和/public/build/images/logo.aez323a.png文件.

我想知道:

什么是"logo.js"？

我怎样才能保留我的目录结构.例如,如果我有:

img/folder1/folder2/img.png

我想保留这个结构,而不是在构建/图像中获取所有内容

多谢你们

Answer 1

我找到了一个很好的解决方案来处理模板中的图像或其他文件.

这里 - > https://knpuniversity.com/screencast/webpack-encore/copy-plugin

第1步:安装插件

yarn add copy-webpack-plugin --dev

第2步:配置webpack.config.js

var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

第3步:告诉webpack你的文件夹在哪里(例如静态,可以是img或任何东西)

.addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
]))

第4步:运行安可

yarn run encore dev

将所有文件夹和文件转换为"静态"(例如)将复制到"Public/build"文件夹中!

Voilàvoilà