Webpackファイルローダー経由で読み込まれた画像がありません

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は、問題の最大は、1メガバイトの周りのほとんどは（300メガバイトの合計周りのバンドルのため）、5メガバイト程度であり、（すべて同じデザイナーから）それらが作成されたかについての異なる何

Answer 1

結局のところはありませんその正規表現修飾子を削除（igm）これを解決しました。私はそれがrequire.contextの制限であるかどうかわかりませんが、イメージの400すべてが正しくロードされています。

これは私が

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

stockImageReq.keys().forEach(stockImageReq); 

になってしまったものです