Webpack5如何不使用import语法打包动态传入的图片路径

Webpack在编译阶段是靠静态扫描识别依赖的，它不会主动遍历你代码里写的任意字符串、去猜哪个字符串对应要打包的静态资源。你在数组里写的纯文本图片路径，对Webpack来说只是普通的字符串值，根本不会被判定为图片资源引用，自然不会触发你配置里的png打包规则，最终运行时浏览器拿着原始路径去请求文件，只会直接404。

你现在已经是Webpack5，配置了asset/resource的资源处理规则，完全不需要额外装url-loader、file-loader这些旧版本依赖，直接调整业务代码就能实现效果，两种常用写法可以按需选择：

写法1：资源数量少的时候，直接用require替换纯字符串 #

把原来存路径的纯字符串数组，改成Webpack可识别的require引用：

// 原写法：const paths = ['../public/assets/image1.png','../public/assets/image2.png']
// 改为可被Webpack扫描识别的写法
const paths = [
  require('../public/assets/image1.png'),
  require('../public/assets/image2.png')
]

const Parent = () => {
  // 顺带修正原代码里的小笔误：你定义的是复数paths，写的时候写成了单数path，运行会报未定义
  return (
    <div>
      <Child srcPath={paths[0]} />
    </div>
  );
};

const Child = ({srcPath}) => {
  return (
    <img src={srcPath} />
  )
}

这种写法里的require语句会被Webpack正常扫描到，匹配你配置的png处理规则，返回经过hash命名后的真实打包资源地址，传给props的srcPath可以直接用在img标签上，不会出现加载失败的问题。

写法2：图片数量多的时候，用Webpack内置的require.context批量加载 #

如果你的图片存放在同一个固定目录下，不想逐行写require，可以用require.context让Webpack自动扫描指定目录下的所有匹配文件，一次性完成打包：

// 三个参数分别是：
// 1. 图片所在的目录路径
// 2. 是否递归扫描子文件夹
// 3. 匹配需要打包的文件类型正则
const imageContext = require.context('../public/assets', false, /\.(png|svg|jpg|jpeg|gif)$/);

// 批量生成可用的资源路径数组
const paths = imageContext.keys().map(fileKey => imageContext(fileKey))

这种写法的好处是后续往目录里加新图片的时候，不需要再修改代码里的引用关系，Webpack会自动把所有匹配的图片纳入打包，后续传props的时候直接从paths数组里取就行，维护成本低。

• 不要写完全无上下文的动态require（比如require(用户任意输入的路径)这种），Webpack的静态分析有边界，必须给它明确的扫描范围（明确的目录、明确的匹配规则），才能正确识别要打包的资源
• 你现有的webpack.config.js完全不需要调整，上面两种写法都能和你已经配置好的asset/resource规则兼容，不需要额外加配置

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