Create-react-app: A way to defined the bundle filename?

[openwms]

From the docs:
"The build is minified and the filenames include the hashes."

Is there a configuration option to define the bundle file name (statically without hash) ? Or is there a way to get the bundle filename during the build?

Need to bypass index.html and load the JS bundle directly from a portal application.

Thanks for a short answer

[sowhatdoido]

Is there any reason why you couldn't get the bundle name from the index.html file in the build directory?

[openwms]

@sowhatdoido I could parse the index.html and get the generated bundle name from there. But is this the most elegant solution? However when I can't define the bundle name on myself (I like using hashes to avoid caches, too), I could imagine to get it an build time from webpack

[sowhatdoido]

So if you wanted to just get the generate bundle names from the build tool, you can already infer the production location of the script based on the current console output:

File sizes after gzip:

  35.56 KB  build\static\js\main.93e63538.js
  526 B     build\static\css\main.de8ab87f.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

Thus your two scripts would just be:

http://myname.github.io/myapp/static/js/main.93e63538.js
http://myname.github.io/myapp/static/css/main.de8ab87f.css

You can then append any hash you want onto the end of this script manually if you wish, though I don't think it's a good idea to try and disable the generated hash just to add your own later.

---

If you want a more automated message solution and are willing to maintain your own CRA repo, you can modify the output in:

create-react-app\packages\react-scripts\scripts\build.js, which will give you the generated files
create-react-app\packages\react-dev-utils\printHostingInstructions.js, handles rendering hosting instructions

[openwms]

@sowhatdoido I got this working by writing a custom filter, attached to the build, that reads the actual bundle filename and uses it to replace placeholders in some other json files. Basically this is used for a portal built with CanopyTax single-spa. Each portal service registers itself at the portal (therefore the bundle filename as entry point must be known at runtime). Nevertheless other issues occurred, like single-spa mount/unmount/bootstrap functions were erased during minifying. So I needed to finally reject and strip down the whole built

[sowhatdoido]

Are you sure your functions were missing and not just scoped by webpack? Try attaching the functions to window and see if you can access it. For instance, if you have a function defined as:
function startApp() {}
that you planned to use to start up your app, try defining it as

window.startApp = function() {}

I wish you the best of luck!

[bologer]

@openwms another way in package.json:

...
"build": "react-scripts build && mv build/static/js/main*.js build/static/js/main.min.js",
...

[NateAGeek]

Something that I was able to do with React Rewired (https://github.com/timarney/react-app-rewired). I will say that if you are really overriding a lot in the future it might be worth ejecting.

// config-overrides.js
module.exports = {
  webpack: function(config, env) {
    if (env === "production") {
      //JS Overrides
      config.output.filename = 'static/js/[name].js';
      config.output.chunkFilename = 'static/js/[name].chunk.js';

      //CSS Overrides
      config.plugins[4].filename = 'static/css/[name].css';

      //Media and Assets Overrides
      config.module.rules[1].oneOf[0].options.name = 'static/media/[name].[ext]';
      config.module.rules[1].oneOf[3].options.name = 'static/media/[name].[ext]';
    }

    return config;
  }
};

This should take care of the hashes, mapping, and media/asset. Sadly with the way plugins are implemented in an array, I have to use fixed indexes. Also, if you do end up adding more plugins it could mess with those fixed indexes.

[NathanCH]

@openwms share solution instead of closing issue?

@bologer this solution is brittle because the build script will hardcode the original (re: build/static/js/main.js). When you rename it, and you use something like webpack code splitting, the bundle will still look for main.js and not main.min.js.

[bologer]

@NathanCH I know this is no the best way, however the min part isn't true, look as this part:

.. mv build/static/js/main*.js build/static/js/main.min.js