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

Question

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.
I want every build to generate new unique name to js, css and html files.

Answer 1

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: