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 のファイル名しか出力されません)。ブラウザ内で画像にアクセスすると、バンドルにリストされていないものは 404 です。ログにエラーがスローされていないため、require は適切な場所にあるすべての画像を見つけているようです。
一部の画像が正常に読み込まれるのに、他の画像が読み込まれない理由を知っている人はいますか? すべてがjpg
s で、問題の最大のものは約 5MB、ほとんどは約 1MB (バンドルの場合は合計約 300MB) であり、作成方法に違いはありません (すべて同じデザイナーによるものです)。