webpack引入指定文件夹下资源遇到需要引入某一目录下的所有文件时，例如router分多个文件、需要某一指定文件下的所

遇到需要引入某一目录下的所有文件时，例如router分多个文件、需要某一指定文件下的所有图片，如果文件过多，手动引入过于麻烦，所以需要动态引入

语法

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

文档链接

Dependency Management | webpack

DEMO

/**
 * 引入指定所有的图标
 **/
const requireContext = require.context(  '@/assess/images/file-icon',  true,  /\.png$/)

// images: { code: xxx.png, .... }
const images = requireContext.keys().reduce((images, path) => {  
    // ./code.png => code  
    const name = path.replace(/^\.\/|.png$/g, '')  
    images[name] = requireContext(path)  
    return images
}, {})