Webpack动态插入背景图路径问题：图片未哈希导致文件名不匹配

这个问题的核心原因很明确：Webpack只能处理编译阶段能静态分析到的资源引用。你在JavaScript字符串里直接写的../img/foobar.jpg属于动态字符串，Webpack没办法识别这是一个图片资源引用，自然不会调用file-loader去处理它，也就不会替换成哈希后的文件名。而CSS里的url()引用会被css-loader解析，转成Webpack能识别的模块，所以能正常生成哈希路径。

下面给你几个可行的解决方案：

方案1：静态导入图片资源 #

如果你知道要使用的图片是固定的，可以直接在JS里用import或者require导入图片，这样Webpack会把它当作资源模块处理，返回哈希后的路径：

// 先导入图片，Webpack会自动处理成哈希后的路径
import foobarImage from '../img/foobar.jpg';

var project = { title: "Foobar", image: foobarImage };

// 生成DOM的时候直接使用这个路径
const div = document.createElement('div');
div.style.backgroundImage = `url(${project.image})`;
document.body.appendChild(div);

这样生成的DOM就会是你想要的带哈希文件名的格式了。

方案2：批量导入图片目录（适用于动态文件名场景） #

如果你的图片文件名是动态获取的（比如从后端接口拿到），可以用Webpack的require.context来批量导入指定目录下的所有图片，然后根据文件名匹配对应的哈希路径：

// 创建一个上下文，加载../img目录下所有.jpg格式的图片
const imageContext = require.context('../img', false, /\.jpg$/);

// 封装一个函数，根据文件名获取哈希后的路径
const getImageUrl = (fileName) => {
  try {
    return imageContext(`./${fileName}.jpg`);
  } catch (err) {
    // 处理图片不存在的情况
    return '../img/default.jpg';
  }
};

// 假设project是动态数据
var project = { title: "Foobar", image: getImageUrl('foobar') };

// 生成DOM
const div = document.createElement('div');
div.style.backgroundImage = `url(${project.image})`;
document.body.appendChild(div);

这个方法的好处是可以处理多个动态图片的场景，只要文件名和图片实际名称对应即可。

额外说明：调整file-loader配置（可选） #

如果需要统一控制图片的输出路径和文件名格式，可以修改webpack.config.js里的file-loader配置，比如：

{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        // 输出的文件名格式，[hash]就是哈希值，[ext]是原扩展名
        name: '[hash].[ext]',
        // 输出目录，相对于output.path
        outputPath: 'images/',
        // 页面引用时的公共路径
        publicPath: './images/'
      }
    }
  ]
}

不过这个配置只是调整输出和引用的路径格式，核心还是要让Webpack能识别到你的图片引用，所以前面两个方案才是解决问题的关键。

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