CODEWITHSUNDEEP
javascriptwebpack
Jackson
Jackson

Reputation: 125

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 with hashed names like the following: 0e8f1e62f0fe5b5e6d78b2d9f4116311.png. If I delete those files, they do not get recreated and I would like for webpack to just use the images that are provided in the images folder.

Now, I am trying to deploy the application on a proxy server and the hash files are being successfully downloaded on page load but the images are not displaying. I have a hunch that fixing the original webpack issue will fix the issue with the proxy server but I'm not sure about that either.

root
├── client
│   └── components
├── database
├── public
│   ├── images
│   ├── app.js
│   └── index.html     
└── server
    └── server.js

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './client/index.js'),
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'env']
        },
      },
      { 
        test: /\.png$/,
        use: 'file-loader'
      }
    ],
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'app.js',
  }
};

The above is my file structure. I've tried to play around with my current config but I struggle with setting up webpack. Any help with these issues would be appreciated.

Upvotes: 4

Views: 5847

Answers (2)

Weam Adel
Weam Adel

Reputation: 260

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]",
    },

Upvotes: 6

s sato
s sato

Reputation: 191

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.

Upvotes: 2

Related Questions