WebpackファイルローダーはPNGファイルのみを出力します

Question

私は現在、既存のプロジェクトをwebpack 2にマージしようとしています。私が現在苦労しているのは、ファイルローダーです。通常は、すべての画像ファイルを<img>とbackground-imageソースから取得して、distフォルダに配置することを期待しています。 WebPACKのコマンドを実行した後、私のwebpack.config.js

module.exports = { 
context: path.resolve(__dirname, 'src'), 
entry: { 
    main: './main.js' 
}, 
output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: "/dist", 
    filename: '[name].js' 
}, 
module: { 
    rules: [ 
     //... 
     { 
      test: /\.(jpg|jpeg|png|svg)$/, 
      use: [{ 
       loader: 'file-loader?name=[name].[ext]&outputPath=/images/' 
      }] 
     }, 
     //... 
     ] 
    } 
}; 

で

これは、現在では、私のdistフォルダが画像フォルダがあり、それがのみは、PNGファイルが含まれています。他のすべてのファイルは何らかの理由で無視されています。

私は今ここで数日間苦労しています。なぜこれが起こるのか、論理的な説明はありません。

Answer 1

webpackは、const src = require('./logo.jpg');のようなイメージが必要なときには、@importとurl()とjavascriptを使って、スタイルシートの画像を取得するだけです。 これは、ちょうどあなたのjpegsになったhtmlファイルで参照されていた画像を取得しません。

copy-webpack-pluginは、これらの画像もdistにコピーする必要があります。