Webpack creates empty image files with FileLoader

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

Webpack creates empty image files with FileLoader

0 Answers0