javascript - 找不到通过 Webpack 文件加载器加载的某些图像

Question

我正在开发一个项目，该项目使用 Webpack 将一组预加载的库存图像与 web 应用程序捆绑在一起。大约有 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]"
    }
  ]
}

ma​​in.js

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 个文件名)。当在浏览器中访问图像时，未在 bundle 中列出的图像为 404。日志中没有抛出任何错误，因此 看起来 require 正在将所有图像查找到正确的位置。

有谁知道为什么有些图像加载得很好，但其他图像却不能？全部都是 jpg，最大的大约 5MB，大多数大约 1MB (总共大约 300MB 的 bundle )，并且它们的创建方式没有什么不同(全部来自同一设计师)

Answer 1

事实证明，删除正则表达式修饰符 (igm) 解决了这个问题。我不知道这是否是 require.context 的限制，但所有 400 个图像现在都已正确加载。

这就是我的结局

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

stockImageReq.keys().forEach(stockImageReq);