Build React app generate static files with chunk suffix

Question

I have create a react app using below command npx create-react-app my-app

Now when I am building the app for production using below command npm run build

It generate below files with suffix.

build\static\js\1.82dafdb5.chunk.js build\static\js\runtime~main.229c360f.js build\static\js\main.a27c0d6d.chunk.js build\static\css\main.c2586263.chunk.css

I am looking how can i avoid random number and chunk suffix in file name. And is there any way to only have one js file so that instead of importing three js files I can have one js file to import.

Answer 1

After digging around quite a bit, I found the Following solution which worked on Windows.

Install:

npm i --save-dev renamer replace-in-file

And replace package.json build with these

{
    "build": "react-scripts build && npm run build-rename",
    "build-rename": "npm run build-rename-js && npm run build-rename-css && npm run build-fix-references",
    "build-rename-js": "renamer --find \"/main\\.[^\\.]+\\./i\" --replace \"main.\" build\\static\\js\\*",
    "build-rename-css": "renamer --find \"/main\\.[^\\.]+\\./i\" --replace \"main.\" build\\static\\css\\*",
    "build-fix-references": "npm run build-fix-sourcemap && npm run build-fix-index && npm run build-fix-serviceworker && npm run build-fix-assetmanifest",
    "build-fix-sourcemap": "npm run build-fix-sourcemap-js && npm run build-fix-sourcemap-css",
    "build-fix-sourcemap-js": "replace-in-file \"/sourceMappingURL=main\\.[^\\.]+\\.js\\.map/i\" \"sourceMappingURL=main.js.map\" build/static/js/main.js --isRegex",
    "build-fix-sourcemap-css": "replace-in-file \"/sourceMappingURL=main\\.[^\\.]+\\.css\\.map/i\" \"sourceMappingURL=main.css.map\" build/static/css/main.css --isRegex",
    "build-fix-index": "npm run build-fix-index-js && npm run build-fix-index-css",
    "build-fix-index-js": "replace-in-file \"/main\\.[^\\.]+\\.js/i\" \"main.js?v=%npm_package_version%\" build/index.html --isRegex",
    "build-fix-index-css": "replace-in-file \"/main\\.[^\\.]+\\.css/i\" \"main.css?v=%npm_package_version%\" build/index.html --isRegex",
    "build-fix-serviceworker": "npm run build-fix-serviceworker-js && npm run build-fix-serviceworker-css",
    "build-fix-serviceworker-js": "replace-in-file \"/main\\.[^\\.]+\\.js/i\" \"main.js\" build/service-worker.js --isRegex",
    "build-fix-serviceworker-css": "replace-in-file \"/main\\.[^\\.]+\\.css/i\" \"main.css\" build/service-worker.js --isRegex",
    "build-fix-assetmanifest": "npm run build-fix-assetmanifest-js && npm run build-fix-assetmanifest-css && npm run build-fix-assetmanifest-js-map && npm run build-fix-assetmanifest-css-map",
    "build-fix-assetmanifest-js": "replace-in-file \"/main\\.[^\\.]+\\.js/i\" \"main.js\" build/asset-manifest.json --isRegex",
    "build-fix-assetmanifest-css": "replace-in-file \"/main\\.[^\\.]+\\.css/i\" \"main.css\" build/asset-manifest.json --isRegex",
    "build-fix-assetmanifest-js-map": "replace-in-file \"/main\\.[^\\.]+\\.js\\.map/i\" \"main.js.map\" build/asset-manifest.json --isRegex",
    "build-fix-assetmanifest-css-map": "replace-in-file \"/main\\.[^\\.]+\\.css\\.map/i\" \"main.css.map\" build/asset-manifest.json --isRegex"
}

Reference: https://github.com/facebook/create-react-app/issues/821

Answer 2

You can create new webpack.config.js file at the root of your project and do something like this:

const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    }, ],
  },
  plugins: [new UglifyJsPlugin()],
}

But you need to modify your package.json also accordingly:

...
    "build": "npm run build:react && npm run build:bundle", 
    "build:react": "react-scripts build", 
    "build:bundle": "webpack --config webpack.config.js", 
...