symfony 4 webpack + encore处理模板中的图像更多信息 [英] symfony 4 webpack + encore handle image in template more info

问题描述

与此问题类似：

使用带有Webpack + Encore + Yarn的Symfony 4，我想在我的模板中处理图像
，我真的不知道如何实现这一点。

Using Symfony 4 with Webpack + Encore + Yarn, I want to handle images in my templates, and I am not really how to achieve this.

我把我的图像放在/assets/img/logo.png文件夹中，并在
webpack.config.js中使用它：

I put my image in my /assets/img/logo.png folder, and use this in my webpack.config.js:

.addEntry（'logo'，'。/ assets / img / logo.png'）

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

我跑完后：

纱线运行安可开发

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

Which generates /public/build/logo.js and /public/build/images/logo.aez323a.png files.

我想知道：

什么是logo.js？

What is the "logo.js" for?

如何保留我的目录结构。例如，如果我有：

And how can I keep my directory structure. For example if I have:

img/folder1/folder2/img.png

我想保留这个结构而不是在build / image中获取所有内容

I want to keep this structure and not get everything in build/image

谢谢你们

推荐答案

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

I've found a good solution to handle the images or other files into the template.

此处 - > https://knpuniversity.com/screencast/ webpack-encore / copy-plugin

第1步：安装插件

yarn add copy-webpack-plugin --dev

步骤2：配置webpack.config.js

Step 2: Config the webpack.config.js

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

第3步：告诉webpack你的文件夹在哪里（这里的例子是静态的，可以是img或任何东西）

Step 3: Tell webpack where is your folder (example here static, can be img or anything)

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

第4步：运行安可

yarn run encore dev

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

All your folders and files into "static" (for the example) will be copy into the "Public/build" folder!!!

Voilàvoilà

这篇关于symfony 4 webpack + encore处理模板中的图像更多信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！