My webpack.config.js cant read any image file - Angular 8

Question

I am building a Angular 8 application, but I am getting an error when I build it. I don't know how to load images in the webpack. I've treied a few aproaches, but nothing worked. I am getting this error:

ERROR in ./src/assets/images/icon_transparent.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/app/shared/navigation/navigation.component.html 1:265-326
 @ ./src/app/shared/navigation/navigation.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts

Does the version of the webpack I am using affect this?

My webpack.config.js is this one:

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

module.exports = {
    entry: './src/main.ts',
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            '@': path.resolve(__dirname, 'src/app/'),
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },

            // workaround for warning: System.import() is deprecated and will be removed soon. Use import() instead.
            {
                test: /[\/\\]@angular[\/\\].+\.js$/,
                parser: { system: true }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './src/index.html' }),
        new webpack.DefinePlugin({
            // global app config object
            config: JSON.stringify({
                apiUrl: 'http://localhost:4000'
            })
        }),

        // workaround for warning: Critical dependency: the request of a dependency is an expression
        new webpack.ContextReplacementPlugin(
            /\@angular(\\|\/)core(\\|\/)fesm5/,
            path.resolve(__dirname, 'src')
        )
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
        runtimeChunk: true
    },
    devServer: {
        historyApiFallback: true
    }
}

Answer 1

Files that should be used as external resources (like images, fonts etc.) rather than being bundled into javascript code, must be loaded with an appropriate webpack loader. Usually it is the webpack's native file-loader.

// add this to your rules array
{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  use: 'file-loader'
}

More about loading images with webpack.

Also consider using angular-cli instead of webpack. It's generally works faster and you don't waste time writing webpack config.