CODEWITHSUNDEEP
reactjswebpackhash
Manspof
Manspof

Reputation: 357

react scripts build generate new hash even if the code not changes

I build react app without create-react-app (without eject). I want to generate new hash every build if the code not change (because cache issue). I installed react-app-rewired for using config overloads and change package.json to

    "build": "react-app-rewired build",

in config-overrides.js I'm trying to create new hash for each build (minified, css, js,styled and etc) but not sure I do it in right way

require('dotenv').config();
var uniqid = require('uniqid');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack: function (config, env) {
    console.log('outputconfig before', config.output);
    const buildHash = uniqid();
    config.output.filename = `static/js/[name].${buildHash}.js`;
    config.output.chunkFilename = `static/js/[name].${buildHash}.chunk.js`;
    console.log('outputs config', config.output);
    return config;
  },
};

when I deploy it to production it looks like the hash build is the same if the code has not changes.. not sure if I configure the config-overloads.js right, maybe I need to add webpack or something not sure.enter image description here

I want every build to generate new unique name to js, css and html files.

Upvotes: 0

Views: 5920

Answers (1)

Yilmaz
Yilmaz

Reputation: 49190

If the input is the same, if you did not change anything in the codebase, webpack will ALWAYS produce the same hash. This is the main property of a hash function. So you have to somehow always change the codebase. To achieve this you can write to a js file and import it in app.js so webpack will see that file's input has changed. In your webpack.config.js

const crypto = require("crypto");
const fs = require("fs");

const content = crypto.randomBytes(8).toString("hex");
const value = JSON.stringify(content);
// we have to write a valid javascript
fs.writeFile("src/test.js", `export const a=${value}`, (err) => {
  if (err) {
    console.error(err);
  }
});

this test.js has no effect on your code. So you could safely import in app.js

import "./test.js";

If you dont import it will not work. Because webpack will read only imported code.

in webpack.config.js i defined the filename like this

output: {
    filename: "[name].[hash].js",
    path: path.join(__dirname, "dist"),
    publicPath: "/",
  },

every time I run npm run build it creates a different hash. Proof of work:

enter image description here

Upvotes: 3

Related Questions