Javascript 找不到通过网页包文件加载程序加载的某些图像

我正在从事一个项目，该项目使用Webpack将预加载的一组股票图像与webapp捆绑在一起。大约有400幅图片，其中一半是缩略图。我没有编写400个

require

语句，而是创建一个新的上下文并迭代加载它们

webpack.config.js

entry: __dirname + '/src/main/webapp/app/main.js',

//...

// there are other loaders but this is the one in question
module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: "file-loader?name=img/[name].[ext]"
    }
  ]
}

var stockImageReq = require.context(
  './images/stock',
  true,
  /\.jpg$/igm
);

stockImageReq.keys().forEach(function( imageName ) {
  console.log(imageName);
  stockImageReq(imageName);
}

main.js

entry: __dirname + '/src/main/webapp/app/main.js',

//...

// there are other loaders but this is the one in question
module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: "file-loader?name=img/[name].[ext]"
    }
  ]
}

var stockImageReq = require.context(
  './images/stock',
  true,
  /\.jpg$/igm
);

stockImageReq.keys().forEach(function( imageName ) {
  console.log(imageName);
  stockImageReq(imageName);
}

所有股票图像都位于

/images/stock

目录中，并提供给

/img

。问题是，当webpack完成对静态资产的捆绑时，它只提供目录中略多于一半的图像（循环中的

console.log

仅打印大约230个文件名）。在浏览器中访问图像时，捆绑包中未列出的图像是404。日志中没有抛出错误，因此似乎需要在适当的位置查找所有图像

---

有人知道为什么有些图像加载得很好，而其他图像加载得不好吗？所有图像都是

jpg

s，所讨论的最大图像约为5MB，最多约为1MB（对于一个总共约300MB的包），它们的创建方式没有什么不同（都来自同一个设计师）结果是删除regex修饰符（

igm

）解决了这个问题。我不知道这是否是

require.context

的限制，但现在所有400幅图像都已正确加载

这就是我的结局

var stockImageReq = require.context(
  './images/stock',
  true,
  /^.*\.(png|jpe?g)$/
);

stockImageReq.keys().forEach(stockImageReq);

---

事实证明，删除正则表达式修饰符（

igm

）解决了这个问题。我不知道这是否是

require.context

的限制，但现在所有400幅图像都已正确加载

这就是我的结局

var stockImageReq = require.context(
  './images/stock',
  true,
  /^.*\.(png|jpe?g)$/
);

stockImageReq.keys().forEach(stockImageReq);