Webpack 4 Child compilation failed: Module parse failed: Unexpected character '�' (1:0)

Question

this is my first time using Webpack and I have a problem with it.

I get error message ERROR in Error: Child compilation failed: Module parse failed: Unexpected character '�' (1:0)

when I put image tag src in this way. I add a period before the first '/' because I am in my root folder and want to go up one folder into assets. So, I want it to look like this: img src="./assets/images/mockup.png" alt=" but this fails the build to production and development mode

It works in development mode if I don't add the period like this. img src="/assets/images/mockup.png" alt="", but it is not what I want for final build. It fails the final build because it can't find my assets if I don't put the period first.

Here is my file tree:

This is my webpack configuration.

webpack.config.js

const currentTask = process.env.npm_lifecycle_event
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const fse = require('fs-extra')

const postCSSPlugins = [require('postcss-import'), require('postcss-mixins'), require('postcss-simple-vars'), require('postcss-nested'), require('postcss-hexrgba'), require('postcss-color-function'), require('autoprefixer')]

class RundAfterCompile {
    apply(compliler) {
        compliler.hooks.done.tap('Copy Images', function () {
            fse.copySync('./app/assets/images', './dist/assets/images')
        })
    }
}

// htmls
let pages = fse
    .readdirSync('./app')
    .filter(function (file) {
        return file.endsWith('.html')
    })
    .map(function (page) {
        return new HtmlWebpackPlugin({
            filename: page,
            template: `./app/${page}`,
        })
    })

// CSS
let cssConfig = {
    test: /\.css$/i,
    use: ['css-loader?url=false', { loader: 'postcss-loader', options: { plugins: postCSSPlugins } }],
}

// Common rules
let config = {
    entry: './app/assets/scripts/App.js',
    plugins: pages,
    module: {
        rules: [
            cssConfig,
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        interpolate: true,
                    },
                },
            },
        ],
    },
}

// Developement stage
if (currentTask == 'dev') {
    cssConfig.use.unshift('style-loader')
    config.output = {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'app'),
    }
    config.devServer = {
        before: function (app, server) {
            server._watch('./app/**/*.html')
        },
        contentBase: path.resolve(__dirname, 'app'),
        hot: true,
        port: 3000,
        host: '0.0.0.0',
    }
    config.mode = 'development'
}

Am I making a mistake in my webpack config file? Why do I get the error: 'ERROR in Error: Child compilation failed: Module parse failed: Unexpected character '�' (1:0)'

in development mode and production mode if I add the './'. Any ideas? Without the '.' it can't find the files in my file tree right?