javascript - webpack中如何使用url-loader导入多张图片？

Question

我的 webpack 配置:

{ test: /\.(png|jpg)$/, loader: 'url?limit=8192' }

在我的项目中，我必须像这样导入图像:

import homeBg1 from './image/homeBg1.jpg';
import homeBg2 from './image/homeBg2.jpg';
import homeBg3 from './image/homeBg3.jpg';

操作繁琐，谁能指点一下？谢谢!

Answer 1

此代码将从 image 文件夹中导入所有 *.jpg 文件:

var requireContext = require.context("./image", true, /^\.\/.*\.jpg$/);
requireContext.keys().map(requireContext);

关于 require.context 的更多信息:https://webpack.js.org/guides/dependency-management/#requirecontext