【问题标题】:How to handle images with webpack encore & assets如何使用 webpack encore & assets 处理图像
【发布时间】:2019-10-13 01:45:24
【问题描述】:

所以我似乎对如何使用 webpack encore + assets 中的图像有点困惑。

我像这样存储所有的 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

【问题讨论】:

    标签: image symfony webpack assets


    【解决方案1】:

    您可以使用CopyWebpackPlugin 来执行此操作。你可以阅读this post了解更多详情。

    【讨论】:

    • 感谢您的回答,遗憾的是我尝试了集成的 copyFiles,如果我没记错的话,它与 CopyWebpackPlugin 一样。这里的问题是 - 当图像上传到我的资产目录时,我希望插件自动将其复制到 /public/build 文件夹,而不运行 encore - 事实并非如此。
    • 我认为您不应该在asset 目录中上传。根据the official documentation,你得直接在public目录下上传。
    • Nvm,我以为我应该将文件上传到 /public/build 文件夹中,运行 encore 时会删除该文件夹。我刚刚意识到我可以使用 /public/image 文件夹 - 在运行 encore 时不会被删除。
    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-04-28
      • 1970-01-01
      • 1970-01-01
      • 2018-02-12
      • 2018-08-05
      • 2020-03-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多