Webpack creates empty image files with FileLoader - html

Question

I've just created a template for a webapp using Webpack.
Unfortunatly whenever I'm building the App to dev or Prod, the File-Loader does not fix there references images and it creates empty files.
My config looks like this:
webpack.common.config
// noinspection WebpackConfigHighlighting
const path = require('path');
require('html-webpack-plugin');
module.exports = {
entry: {
vendor: path.join(__dirname, 'Source', 'Vendor.ts'),
main: path.join(__dirname, 'Source', 'Index.tsx')
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/',
include: [
path.resolve(__dirname, 'Source')
],
},
{
test: /\.worker\.ts$/,
loader: 'worker-loader',
options: {
esModule: false,
}
},
{
test: /\.(svg|png|jpg|gif|ico)$/i,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: "Images"
}
}
},
{
test: /\.html$/,
use: ['html-loader']
}
]
}
};
webpack.dev.config
const path = require('path');
const common = require('./webpack.config');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = merge.merge(common, {
mode: 'development',
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'Build')
},
plugins: [
new MiniCssExtractPlugin(
{
filename: '[name].[contenthash].css'
}
),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'Source', 'template.html'),
filename: 'Index.html'
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
enforce: "pre",
test: "/\.js$/",
loader: "source-map-loader"
}
]
},
devtool: 'source-map'
});
Once this is build my Output Folder looks like this:
1a901b56586b6444ae11.ico <-- these should no be here have 0 byte
c4f9748e8b8d4038f05c.png <-- these should no be here have 0 byte
Index.html
main.90957f37ae16dde06736.js
main.90957f37ae16dde06736.js.map
main.cf18790244b83b75a490.css
main.cf18790244b83b75a490.css.map
vendor.1ce4fff9da8447255aaf.js
Images\Favicon.fba6e1cd14b7ac368970b6418b5c67ac.ico
Images\Logo.86047b7e6019c39da248c24c90924f8c.png
The references in the htmls change like this
template.html
<link rel="icon" href="Images/Favicon.ico">
...
<img src="./Images/Logo.png">
Index.html
<link rel="icon" href="1a901b56586b6444ae11.ico">
...
<img src="c4f9748e8b8d4038f05c.png">
I've tested this with the a template I found here were it worked:
https://github.com/Colt/webpack-demo-app