Webpack：画像はロードされません

Question

私はWebpackを初めて使用しています。画像はロードされません... 404エラー。画像が私のdistフォルダに届かないようです。 distファイルに手動でイメージファイルを挿入すると、表示されます。私の理解は、Webpackがあなたがそれを実行するときにdistフォルダ内のすべてを生成することです。これは私のモジュールルールの問題を信じるようになります。私はこのようなパスにdistのフォルダを追加しようとした

module: { 
    rules: [ 
     { 
      test: /\.scss$/, 
      use: cssConfig 
     }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      use: [ 
       'file-loader?name=images/[name].[ext]', 
       'image-webpack-loader' 
      ] 
     }, 

：

<img class="img-responsive" src=<%=('images/tech-town-showcase-students.JPG') %> alt="students meeting with tech business owner"/> 

そして、私のconfig.jsのから：ここで

は私のイメージタグである

'file-loader?name=dist/images/[name].[ext]', 

しかしそれは役に立たなかった。他に何を見ているべきですか？

Answer 1

distディレクトリに画像がコピーされないのは、webpackがこれらのファイルをまったく処理しないためです。file-loaderは適用されません。あなたのイメージタグでは、あなたが使用：

src=<%=('images/tech-town-showcase-students.JPG') %> 

あなたはsrc=images/tech-town-showcase-students.JPGに相当しますテンプレートエンジンとしてEJSを使用していると仮定すると。 Webpackはこれをモジュールとして処理しません。これは通常の文字列であり、インポートとして扱われないためです。

webpackがそのファイル用に設定したローダーを適用するようにインポートする必要があります。文字列の周りにカッコがあるので、どこかからコピーしてrequireを忘れた可能性があります。

src="<%= require('./images/tech-town-showcase-students.JPG') %>"