1

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 は適切な場所にあるすべての画像を見つけているようです。

一部の画像が正常に読み込まれるのに、他の画像が読み込まれない理由を知っている人はいますか? すべてがjpgs で、問題の最大のものは約 5MB、ほとんどは約 1MB (バンドルの場合は合計約 300MB) であり、作成方法に違いはありません (すべて同じデザイナーによるものです)。

4

1 に答える 1