Webpack Creating Hashed File Names For Images In Project

In one of the components in my client/components folder, I am importing three images from the public/images folder. At some point, webpack created a file for each of the images wi

Solution 1:

You can keep original filename/path with the following option.

{
  test: /\.png$/,
    loaders: 'file-loader',
    options: {
      name: '[path][name].[ext]',
    },
},

If you really need to use original file(Not webpack generated file), you should not use file-loader. Just upload image file and make img tag of that file.

Solution 2:

I had the same problem of hashed resources, and adding the file-loader only duplicated the build and furthermore the automatic asset management of new webpack versions with the hashed names overridden the file-loader URLs to the resource in the .css files, so the image did not show at all, if this is the case with you then you can follow the instructions here on the Webpack website.

You only need to add this prop in the output in webpack.config.js and comment file loader if you use it.

    output: {
       ...
       assetModuleFilename: "[name][ext]",
    },