我正在开发一个项目,该项目使用 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]"
}
]
}
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 个文件名)。当在浏览器中访问图像时,未在 bundle 中列出的图像为 404。日志中没有抛出任何错误,因此 看起来 require 正在将所有图像查找到正确的位置。
有谁知道为什么有些图像加载得很好,但其他图像却不能?全部都是 jpg
,最大的大约 5MB,大多数大约 1MB (总共大约 300MB 的 bundle ),并且它们的创建方式没有什么不同(全部来自同一设计师)
最佳答案
事实证明,删除正则表达式修饰符 (igm
) 解决了这个问题。我不知道这是否是 require.context
的限制,但所有 400 个图像现在都已正确加载。
这就是我的结局
var stockImageReq = require.context(
'./images/stock',
true,
/^.*\.(png|jpe?g)$/
);
stockImageReq.keys().forEach(stockImageReq);
关于javascript - 找不到通过 Webpack 文件加载器加载的某些图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37489570/