Webpack не загружается PNG изображения

Question

У меня есть несколько изображений в папке Src:

src/img/favicon.png 
src/img/profpic.png 

В файле index.html я укажу, как

<link rel="shortcut icon" href="img/favicon.png" /> 

В некоторых HTML файлы, которые я укажу, как

<img src="img/profpic.png" /> 

Я пытаюсь загрузить изображения, шрифты через webpack. Ниже мой webpack.config

module.exports = { 
    context: path.resolve('src'), 
    entry: { 
     app: ["./index.ts"] 
    }, 
    output: { 
     path: path.resolve('build'), 
     filename: "appBundle.js" 
    }, 
    devServer: { 
     contentBase: 'src' 
    }, 
    watch: true, 
    module: { 
     preLoaders: [ 
      { 
       test: /\.ts$/, 
       loader: "tslint" 
      } 
     ], 
     loaders: [ 
        {test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']}, 
        { 
         test: /\.css$/, 
         loader: 'style-loader!css-loader' 
        }, 
        { 
         test: /\.scss$/, 
         loader: 'style!css!sass' 
        }, { 
         test: /\.html$/, 
         exclude: /node_modules/, 
         loader: 'raw' 
        }, { 
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
         loader: 'url-loader?limit=1000000&mimetype=application/font-woff' 
        }, { 
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
         loader: 'file-loader' 
        }, { 
         test: /\.json$/, 
         loader: "json-loader" 
        }, { 
         test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' 
        } 
       ]; 
    } 
    plugins: [   
     new HtmlWebpackPlugin({ 
      template: './index.html', 
      inject: 'body', 
      hash: true 
     }), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery', 
      'window.jquery': 'jquery' 
     }) 
    ], 
    resolve: { 
     extensions: ['', '.js', '.es6', '.ts'] 
    } 
} 

Попытка загрузить изображения/шрифты для вывода WebPack папки. Это не ошибка. Его успешно строю, но в сборке это мой WebPack шрифт папки вывода загружается штраф, но изображения не загружаются

Answer 1

Изменения необработанного загрузчика в HTML загрузчик для HTML сделал трюк. Ниже приведены мои изменения

{test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']}, 
{ 
    test: /\.css$/, 
    loader: 'style-loader!css-loader' 
}, 
{ 
    test: /\.scss$/, 
    loader: 'style!css!sass' 
}, { 
    **test: /\.html$/, 
    exclude: /node_modules/, 
    loader: 'html-loader'** 
}, { 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'url-loader?limit=1000000&mimetype=application/font-woff' 
}, { 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'file-loader' 
}, { 
    test: /\.json$/, 
    loader: "json-loader" 
}, { 
    **test: /\.png$/, 
    exclude: /node_modules/, 
    loader: 'file-loader?name=images/[name].[ext]'** 
}