Webpack src/index.htmlで参照されているイメージをdist/images/

Question

に読み込む方法

私はこれをしばらく理解しようとしていましたが、良い答えが見つからないようです。 index.htmlファイルで参照されている.svg、.png、または.jpg画像を自動的に読み込むにはどうすればよいですか？

<img src="./images/logo.svg" alt="" class="logo__image"> 

私はこのように私のSCSSファイル内の画像を参照する場合、それは中華鍋：

.background { 
    background: url('./images/logo.svg'); 
} 

これは私のWebPACKの設定ルールです：あなたはカスタムの出力と公共のパスを指定することができます

{ 
    test: /\.(png|jpe?g|gif|svg)$/, 
    loaders: [ 
    { 
     loader: 'file-loader', 
     options: { 
     attrs: ['img:src', 'source:srcset'], 
     name: 'images/[name].[hash].[ext]' 
     } 
    } 
    ] 
} 

Answer 1

outputPathとpublicPathを使用して

publicPath

webpack.config.js

{ 
    loader: 'file-loader', 
    options: { 
    name: '[path][name].[ext]', 
    publicPath: 'assets' 
    } 
} 

outputPath

webpack.config.js

{ 
    loader: 'file-loader', 
    options: { 
    name: '[path][name].[ext]', 
    outputPath: 'images' 
    } 
}