找不到通过 Webpack file-loader 加载的某些图像

Question

我正在开发一个项目，该项目使用 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]"
    }
  ]
}

main.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 个文件名）。在浏览器中访问图像时，未在捆绑包中列出的是 404。日志中没有错误，因此看来需要在适当的位置找到所有图像。

有谁知道为什么有的图片加载的很好，有的图片加载的不好？都是jpgs，最大的大约是5MB左右，最多的是1MB（对于总共约 300MB 的捆绑包），它们的创建方式没有什么不同（全部来自同一设计师）

Answer 1

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

这就是我的结局

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

stockImageReq.keys().forEach(stockImageReq);

找不到通过 Webpack file-loader 加载的某些图像

Some images loaded through Webpack file-loader are not found

javascript

image

webpack

webpack-file-loader