My webpack config:

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

In my project, I must import images like this:

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

The operating is cumbersome, who can give me some advice?Thx!

My webpack config:

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

In my project, I must import images like this:

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

The operating is cumbersome, who can give me some advice?Thx!

• javascript
• ecmascript-6
• webpack
• urlloader

Share Improve this question Follow edited Jun 25, 2022 at 4:38 Mervyn asked May 19, 2016 at 4:27 MervynMervyn 58255 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

This code will import all *.jpg files from image folder:

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

More about require.context: https://webpack.js/guides/dependency-management/#requirecontext