1

我正在开发一个项目，该项目使用 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），它们的创建方式没有什么不同（都来自同一个设计师）

4

1 回答 1

0

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

这就是我最终得到的

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

stockImageReq.keys().forEach(stockImageReq);
于 2016-05-27T20:02:34.640 回答