当其他模块需要引用文件，file-loader就将对应文件依照name属性要求的文件路径和文件名进行打包。通过计算文件大小，小于limit的值，就将文件转成base64赋给需要这些文件的位置，大于limit的值就将文件的打包后路径赋给需要这些文件的位置
我的疑问：
网上有~说是作为src值的开头可以将这部分的请求作为依赖模块处理但是我没有尝试成功
我的解决方案
由于我还不知道该如何给background-url编程循环引入图片所以我决定采用：
因此我采用编写一个对象数组，对对象数组进行map，return<img src=https://www.jb51.net/{require(bank.img+'')}>
const BANK_LIST = [ {name: '中国银行', img: './assets/bank-logo-6.png', id: 1}, {name: '中国建设银行', img: './assets/bank-logo-7.png', id: 2}, {name: '兴业银行', img: './assets/bank-logo-8.png', id: 3} ] BANK_LIST.map((bank)=>{ return ( <img src=https://www.jb51.net/{require(bank.img+'')} /> ) })
我的另外一种解决方案（由于项目中的eslint要求不支持动态引入文件）
使用webpack带的require.context('pathToDirectory')他可以循环的将一个目录下的所有文件引入
const BANK_LIST = { './bank-logo-6.png': {name: '中国银行', id: 1}, './bank-logo-7.png': {name: '中国建设银行', id: 2}, './bank-logo-8.png': {name: '兴业银行', id: 3} } const pathToImages = require.context('./assets'); const originalBankList = pathToImages.keys().map((key) => { return Object.assign({}, BANK_LIST[key], {url: pathToImages(key)}) }); //这时候originalBankList的每一项会变成 {name: '中国银行', id: 1，url: "/app/src/containers/WisePort/CheckoutCounterContai…/bank-logo-1.9f949c516315756e18c0cb7d572f4d2c.png"'}