如何使用Webpack Encore & assets处理图像

8qgya5xd  于 2023-01-13  发布在  Webpack
关注(0)|答案(3)|浏览(175)

所以我似乎对如何在Webpack Encore +资产中处理图像有点困惑。
我像这样存储所有的JS和CSS

/assets/js
/assets/css
...

使用Encore,我可以稍后从我的**/public/build**文件夹访问它们-没有问题。

现在我想存储一些图像(例如文件上载)。

第一个想法是将它们存储在**/assets/images这样的文件夹中。但是在当前的设置和使用资产的情况下,我只能访问/public/build文件夹中的文件。
因此,我尝试使用
copyFiles将所有内容从/assets/images复制到/public/build/images**。

但是这***不会***自动复制我的文件(例如,文件上传到/assets/images/不会复制到/public/build -这在我的项目中是无法访问的)。因此,我需要手动运行encore -这是我不希望的。

第二个想法是将上传的图像直接存储在/public/build/images中,但是当我运行Encore时,这些文件会被删除。
接下来我禁用了webpack选项cleanupOutputBeforeBuild,这样图片就不会被删除。但是如果没有这个选项,每次我运行encore时,文件夹都会被新的JS和CSS文件淹没。
"我需要什么"
一个解决方案,以存储我的图像在/assets文件夹中的任何方式&使他们可用于我的项目。

将图像直接存储在/public/build文件夹中,而无需再删除它们,也无需通过禁用cleanupOutput选项使用JS/CSS淹没文件夹。
提前感谢~Syllz

9o685dep

9o685dep1#

你可以使用CopyWebpackPlugin来完成这个任务,你可以阅读this post来获得更多的细节。

jv4diomz

jv4diomz2#

**我的问题的解决方案:**将图像存储到/public/images而不是build文件夹中-运行encore时会删除该文件夹。

tjjdgumg

tjjdgumg3#

如果你需要在JS中使用它,只需要文件:

// assets/app.js

import logoPath from '../images/logo.png';
let html = `<img src="${logoPath}" alt="ACME logo">`;

当您需要一个图像文件时,Webpack会将其复制到输出目录中,并返回该文件的最终公共路径。

如果您需要从模板中使用它:

您需要安装文件加载程序才能使用copyFiles()

yarn add file-loader@^6.0.0 --dev

然后在webpack.config.js中启用它:

.copyFiles({
    from: './assets/images',
    //optional target path, relative to the output dir
    //to: 'images/[path][name].[ext]',

    //if versioning is enabled, add the file hash too
    to: 'images/[path][name].[hash:8].[ext]',
    //only copy files matching this pattern
    //pattern: /\.(png|jpg|jpeg)$/
})

然后在你的树枝模板中使用它:

<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">

Symfony文档中的详细信息

相关问题