Webpack disable hashing of image name on output

Question

After building my angular4 application, webpack changed my image name from bg_node_new.png to bg_node_new.3746bc3ac9b1bf77d2aff2c2df901a48.png.

my webpack.config code is:

(function(module) {

    const path = require('path');
    const npm_cmd = process.env.npm_lifecycle_event;
    const p = !(require('yargs').argv.p || false);
    let config;

    module.exports = function(env) {

        let cmds = npm_cmd.split(":");
        const cmd = cmds.length >= 2 ? cmds[1] : null;
        const mod = cmds.length >= 3 ? cmds[2] : null;
        const aot = cmds.length >= 4 ? cmds[3] : null;

        const options = {
            p:!p,
            mod:mod,
            aot:aot,
            env:env,
            ngv:2,
            ctx:path.resolve(__dirname, "../../../../..")
        }
        //console.log(options);

        switch (cmd) {
          case 'app': 
            console.log("Building app");
            config = require('./wp.app')(options);
            break;
          case 'lib': 
            console.log("Building lib");
            config = require('./wp.lib')(options);
            break;
          case 'mod':
            console.log("Building mod");
            config = require('./wp.mod')(options);
            break
          default:
            console.log("Building app");
            config = require('./wp.app')(options);
            break;
        }

        return config;
    }

})(module);

Due to this, the image is not rendering in my app. how to resolve this issue?

Thanks in Advance!

[Look at this](https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader) or [this](https://stackoverflow.com/questions/38469831/file-loader-changed-image-file-name-but-not-the-file-name-in-html-file) to see if helps you to solve your problem. — Elmer Dantas, Aug 22 '17 at 06:08
I have wp.app.js, ap.base.js, wp.lib.js, wp.mode.js, wp.test.js — Saravana, Aug 22 '17 at 06:25
you can have a look at this link - https://embed.plnkr.co/mlNmg8qP9DEhwNktZNc7/ — Saravana, Aug 22 '17 at 06:46
I tried changing `'file-loader?name=assets/[name].[hash].[ext]'` to `'file-loader?name=assets/[name].[ext]'`. from wp.base.js, but still no luck. — Saravana, Aug 22 '17 at 06:48
it's removing [hash] values on font now, but it's not converting images at all :( — Saravana, Aug 22 '17 at 10:00

FAISAL · Accepted Answer · 2017-08-22T07:28:55.620

UPDATED After OP's comment:

In your wp.base.js, remove [hash] from the following:

const raw_file_loader = {
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|otf)$/,
    use: 'file-loader?name=assets/[name].[ext]'
}

ORIGINAL Answer:

If you share your webpack config, I'll be ablr to answer better. However, Find a config like this in your webpack.config,

{
  test: /.*\.(gif|png|jpe?g|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '/images/[name]_[hash:7].[ext]',
      }
    },
  ]
}

... and remove the [hash] part. Just keep it like this:

name: '/images/[name].[ext]',

score 0 · Answer 2 · answered Aug 22 '17 at 06:00

0

This is because of hashing Angular does at the time of build to stop that use , provided you are using Angular CLI

 ng build --prod --output-hashing none

answered Aug 22 '17 at 06:00

Rahul Singh

19,030
11
64
86

thanks for the answer. we are not using Angular CLI :( – Saravana Aug 22 '17 at 06:02
@Sarav what are you using ? – Rahul Singh Aug 22 '17 at 06:02
1

@Rahul, webpack – FAISAL Aug 22 '17 at 06:03
@Sarav cli also uses webpack now so i got confused with it – Rahul Singh Aug 22 '17 at 06:04
1

Yes I know, but he is using webpack.config – FAISAL Aug 22 '17 at 06:06

score 0 · Answer 3 · answered Nov 12 '20 at 21:45

To solve the problem in React project, I set webpack.config.js like this

module: {
    rules: [
        {
            test: /\.(png|svg|jpg|gif)$/,
            loader: "file-loader",
            options: {
                name: 'images/[name].[ext]',
            },
        }
    ]
},

score 0 · Answer 4 · answered Apr 28 '21 at 03:22

you may also need to turn off source handling in your html loader

            {
            test: /\.html$/i,
            use: [
                {
                    loader: 'html-loader',
                    options: { minimize: false, sources: false }
                }
            ]
        }

Webpack disable hashing of image name on output

4 Answers4

Linked