如何基于JSON文件内的图片路径为webpack构建动态生成import引入语句

可行解决方案如下 #

方案1：使用webpack原生require动态引入（最便捷，无需额外工具） #

webpack原生支持在require中使用变量引入资源，会自动在构建阶段处理所有匹配到的资源打包，完全不需要手动写顶层import：

import data from './menu.json'

// 生成和手动导入逻辑一致的图片映射表
const imgMap = {}
Object.keys(data).forEach(key => {
  imgMap[`img${key}`] = require(data[key].img)
})

// 后续使用时直接取imgMap.img0、imgMap.img1即可拿到和手动import一致的资源路径

如果不想引入目录下无关图片，也可以用require.context精准匹配你需要的图片规则：

// 第二个参数false表示不遍历子目录，正则匹配所有10开头的png图片
const imgContext = require.context('./', false, /^10\d+.*\.png$/)
const imgMap = {}
imgContext.keys().forEach(path => {
  const id = path.match(/10(\d+)/)[1] - 1
  imgMap[`img${id}`] = imgContext(path)
})

方案2：预生成import代码（适合需要严格使用顶层import的场景） #

写个简单的Node脚本自动生成导入文件，每次更新menu.json后执行一次即可，完全不用手动复制：

1. 新增生成脚本gen-imports.js：

const fs = require('fs')
const menuData = require('./menu.json')

// 生成所有import语句
const importLines = Object.keys(menuData).map(key => {
  return `import img${key} from '${menuData[key].img}'`
}).join('\n')

// 生成导出语句
const exportLine = `\nexport { ${Object.keys(menuData).map(k => `img${k}`).join(', ')} }`

// 写入到自动生成的文件
fs.writeFileSync('./auto-img-imports.js', importLines + exportLine)

2. 执行脚本生成导入文件：

node gen-imports.js

3. 在业务代码中直接引入生成的文件即可：

import * as imgMap from './auto-img-imports.js'
// 直接使用imgMap.img0、imgMap.img1即可

你还可以把脚本执行命令配置到package.json的启动钩子中，每次启动项目自动执行，完全不需要手动干预。

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