React導入圖標/圖像

Question

我有100個要導入的圖標和圖像。有沒有辦法消除在頁面頂部寫入如此多的導入語句？我正在考慮在一個單獨的文件中寫入一個導入語句，並將其嵌入頂部。

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' 
    ] 
} 

Answer 1

是的，這是更多鈔票，看我的答案在這裏：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