Symfony 4+Webpack Encore处理模板图片：logo.js用途与目录结构保留

一、生成的logo.js文件有什么用途？ #

其实你把图片直接作为Webpack的entry来添加，是有点“非常规”的用法哦😉。Webpack本质是模块打包工具，当你把./assets/img/logo.png作为一个entry时，它会把这张图片当成一个模块处理，生成的logo.js其实是一个导出图片最终URL的小模块。

举个例子，如果你在某个JS文件里这样引入：

import logoUrl from './logo';
// 这里的logoUrl就是编译后图片的完整路径，比如/build/images/logo.aez323a.png

然后你就能在JS里用这个路径来动态设置图片的src了。但如果你的需求只是在Twig模板里直接引用这张图片，其实完全没必要把它单独做成entry——这反而多生成了一个对你来说没用的JS文件。

二、如何保留图片原有的目录结构？ #

默认情况下，Webpack Encore会把所有处理后的图片统一放到public/build/images/目录下，并且加上哈希后缀（就是你看到的.aez323a）。如果想保留assets/img/这样的原有目录结构，可以通过两种方式实现：

方式1：使用copyFiles插件（推荐） #

这个插件可以直接复制指定目录的文件到构建目录，同时保留原有的结构。在你的webpack.config.js里添加：

Encore
  // ...其他配置
  .copyFiles({
    from: './assets/img',
    // 保留原目录结构，输出到build/img/下
    to: 'img/[path][name].[hash:8].[ext]',
    // 可选：匹配要复制的图片格式
    pattern: /\.(png|jpg|jpeg|gif)$/
  })

这样执行yarn run encore dev后，assets/img/logo.png会被复制到public/build/img/logo.aez323a.png，完美保留了原有的img/目录结构。

方式2：调整asset模块的输出路径 #

如果你是通过在CSS/JS里引用图片（比如background: url('../img/logo.png')），可以修改Encore的asset配置来保留路径：

Encore
  // ...其他配置
  .configureAssetRules({
    images: {
      outputPath: 'img/[path]',
      filename: '[name].[hash:8].[ext]'
    }
  })

不过这种方式适合那些被代码引用的图片，而copyFiles更适合直接在模板里使用的静态图片。

另外补充一句：如果只是在Twig模板里用图片，推荐用asset()函数引用构建后的路径，比如：

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

内容的提问来源于stack exchange，提问作者Anthony Ln