webpack 在构建时动态导入文件
webpack import files dynamically while build
我有一个包含大约 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
如果你有很多资产,不想手动导入它们,你可以使用require.context
。
这是一个可能适用于您的情况的简单示例:
const images = require.context('../assets/images/', false, /\.jpg$/)
const descriptions = images.keys().map(images).map(source => ({
code: 'code',
alt: 'alt',
source
})
我有一个包含大约 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如果你有很多资产,不想手动导入它们,你可以使用require.context
。
这是一个可能适用于您的情况的简单示例:
const images = require.context('../assets/images/', false, /\.jpg$/)
const descriptions = images.keys().map(images).map(source => ({
code: 'code',
alt: 'alt',
source
})