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

Question

喜欢：

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

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

And after I run :

yarn run encore dev

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

我想知道：

“logo.js”是什么意思？

我怎样才能保持我的目录结构。例如，如果我有：

img/folder1/folder2/img.png

我想保留这个结构，而不是得到 build/image

中的所有内容

谢谢大家

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

您在 "static" 中的所有文件夹和文件（例如）将被复制到 "Public/build" 文件夹中！！！

瞧瞧瞧

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

symfony 4 webpack + encore handle image in template more info

templates

image

symfony

webpack

symfony4