批量反应导入图标/图像

时间:2016-12-31 14:50:31

标签: javascript reactjs import webpack

我要导入100个图标和图像。有没有办法消除在页面顶部写这么多import语句?我想在一个单独的文件中编写一个import语句并将其嵌入顶部。

import basicAmenitiesIcon from '../../../../images/icons/wifi-sign.png';
import parkingIcon from '../../../../images/icons/parking.png';
...

还有其他解决方法吗?我正在使用webpack,这是配置:

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
}

1 个答案:

答案 0 :(得分:3)

是的,它是可行的,请参阅我的答案:https://stackoverflow.com/a/41410938/646156

var context = require.context('../../../../images/icons', true, /\.(png)$/);
var files={};

context.keys().forEach((filename)=>{
  files[filename] = context(filename);
});
console.log(files); //you have file contents in the 'files' object, with filenames as keys