'File-loader creating 2 images and linking the wrong one

file-loader is creating two separate images in my build folder. One is the named correctly and saved in the correct path, the other is named [hash].png (which is the default) and is stored in build, not build/images. The second incorrect file is 0 bytes; this is the one being linked in the final index.html file in the build folder. I've defined both outputPath and publicPath. publicPath doesn't seem to actually do anything though, regardless of what I put there. Am I misunderstanding what it does?

module.exports = {
    entry: {
        index: './app/main.js',
        vendor: './app/vendor.js'
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].[contenthash].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/, /api/, /tests/, /coverage/],
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.(svg|png|jpg|gif)$/,
                use:{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'images/',
                        publicPath: 'images/'
                    }
                }
            },
        ]        
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './app/index.html' }), 
        new CleanWebpackPlugin()
    ]
};

Image link in final html:

<img src="465107fe07e3ec18a463.png">

Another post with the same issue that didn't get any answers: Webpack, I am trying to use file loader to load images but whenever i run build i get 2 images not 1 and the one linking to the html file is wrong

htmlimagewebpackwebpack-file-loaderfile-loader


Solution 1:[1]

        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
        },

Solution 2:[2]

This is a problem of file-loader v6. I solved this with the way adding esModule option.

Both html-loader, css-loader and loader that using image url need the esModule option false.

Or you should use the file-loader except v6.

{
  loader: 'css-loader',
  options: {
    esModule: false
  }
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Petru Caraman
Solution 2 Lee Hyunsoo

Related Questions