webpack 在构建时动态导入文件答案

【问题标题】：webpack import files dynamically while buildwebpack 在构建时动态导入文件
【发布时间】：2019-06-07 21:39:16
【问题描述】：

我有大约 1000 张图片的 webpack + typescript 项目。我也有一个描述这些图像的文件，如下所示：

[{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: './pathToA.jpg'
}]

我得到的 B、C、D 和其他 997 张图片的代码相同。在客户端的一天结束时，应该在下面生成 html：

<img src="/static/pathToA.jpg" alt="imageAAlt"/>

我还使用imageACode 将一些 html 代码替换为该图像（无论如何）。

好吧，我能做到的最简单的方法是：

import a from "../assets/images/pathToA.jpg"

{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: a
}

有没有更优雅的方式：

{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: import '../assets/images/pathToA.jpg'
}

或者可能是 webpack 应该运行的某种 forEach。

【问题讨论】：

标签： typescript webpack import ts-loader imageloader

【解决方案1】：

如果你有很多资产，不想手动导入，可以使用require.context。

这是可能适用于您的情况的简单示例：

const images = require.context('../assets/images/', false, /\.jpg$/)
const descriptions = images.keys().map(images).map(source => ({
    code: 'code',
    alt: 'alt',
    source
})

【讨论】：