画像のsrc属性が等しい "[対象オブジェクト]" 私はHTMLと資産を処理するためのWebPACKを使用していWebPACKの

によって処理されるとき、ここに最小限のwebpack.config.jsだ：画像のsrc属性が等しい "[対象オブジェクト]" 私はHTMLと資産を処理するためのWebPACKを使用していWebPACKの

const CleanWebpackPlugin = require('clean-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const OUTPUT_DIR = __dirname + '/dist'; 

module.exports = { 
    context: __dirname + '/src', 
    entry: './index.js', 
    module: { 
    rules: [ 
     { 
     test: /\.html$/, 
     use: { 
      loader: 'html-loader' 
     } 
     }, 
     { 
     test: /\.jpg$/, 
     use: { 
      loader: 'file-loader', 
      options: { 
      name: '[name].[ext]' 
      } 
     } 
     } 
    ] 
    }, 
    plugins: [ 
    new CleanWebpackPlugin([ 
     OUTPUT_DIR 
    ]), 
    new HtmlWebpackPlugin({ 
     template: 'index.html' 
    }) 
    ], 
    output: { 
    filename: '[name].js', 
    path: OUTPUT_DIR, 
    publicPath: '/' 
    } 
};

マイソースindex.html：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <title>Example Web Page</title> 

</head> 

<body> 

    <img src="image.jpg"> 

</body> 

</html>

問題は、最終的なHTML文書では、画像タグは<img src="[object Object]">のようになります。

html-loaderを使用して読み込まれたソースHTMLドキュメントをテンプレートとして使用して出力HTMLを生成するにはhtml-webpack-pluginを使用しています。

画像は出力ディレクトリに実際に追加されます。

私は何が間違っているのか分かりません。

出典

2017-10-01 Slava Fomin II