Webpack not loading png images

Question

I have few images in src folder:

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

In index.html file I will point as

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

In some html files I will point as

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

I am trying to load images, fonts via webpack. Below is my 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']
    }
}

Trying to load the images/fonts to webpack output folder. Its not throwing any error. Its successfully building but in build which is my webpack output folder font is loading fine but images​ are not loading

Solution

Changing the raw loader to html loader for html done the trick. Below is my changes

{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]'**
}

Comments

[dfrankow]

why sometimes test and sometimes **test ?