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。日志中没有抛出任何错误，因此似乎需要在适当的位置找到所有图像。

有谁知道为什么有些图片加载得很好，但有些图片没有？所有版本都是jpg s，最大问题是大约5MB，最多大约1MB（对于捆绑包）总共约300MB），它们的创建方式没有任何不同（均来自同一位设计师）

Answer 1

原来删除正则表达式修饰符（igm）解决了这个问题。我不知道它是否是require.context的限制，但现在所有400张图片都已正确加载。

这就是我最终的结果

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

stockImageReq.keys().forEach(stockImageReq);

未找到通过Webpack文件加载器加载的某些图像

1 个答案: