Build files name change - files that are generated from create react app

Question

The build files generated through create react app have different names (hash code) every time.

I would like to give custom names for the generated files.

Is there any possibility to do that?

Is there a way to do this without ejecting

Max Carroll
– Max Carroll

2020-10-01 11:05:10 +00:00
Commented Oct 1, 2020 at 11:05 — Max Carroll
– Max Carroll, Commented Oct 1, 2020 at 11:05

ChrisW · Accepted Answer · 2020-05-09 06:58:57Z

5

You can change the output filename by customizing the filename property in webpack config -- refer to https://webpack.js.org/guides/caching/

The default implementation is kept like this because, because every time you build an asset, it generates a new name and browsers won't be able to serve a cached response.

If you change the name to a constant you might need to clear the browser cache manually/ disable cache to see your changes immediately. (I think...Applicable only in prod mode as dev mode makes use of Hot module replacement)

Steps to change file name in CRA.

npm run eject This will unwind the hidden configs from CRA and show some additional config folders
Move to the config folder.
Edit file webpack.config.js (Somewhere around line 172 - 180 you can see filename: section where this is defined)

edited May 9, 2020 at 6:58

ChrisW

56.4k14 gold badges125 silver badges236 bronze badges

answered Sep 25, 2019 at 4:02

Nithin Thampi

3,7091 gold badge16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arkantos1 Over a year ago

Thanks for the response. May I know where I can find that file for application generated with create react app?

Nithin Thampi Over a year ago

You need to eject the app first. I'll update the answer to do that

Remi Over a year ago

Please note that if you eject the app you will have to start maintaining the webpack configuration yourself and you derive from the standard. medium.com/curated-by-versett/…

Remi · Accepted Answer · 2019-11-07 10:01:05Z

0

Following up to my comment, if you absolutely must change Webpack configuration you can also consider libraries such as:

answered Nov 7, 2019 at 10:01

Remi

5,50713 gold badges61 silver badges94 bronze badges

1 Comment

stackoverflow Over a year ago

craco doesn't have support for adding __filename to "node" property

Collectives™ on Stack Overflow

Build files name change - files that are generated from create react app

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related