A way to defined the bundle filename? #4156

Activity

1. sowhatdoido commented on Mar 14, 2018

   

   sowhatdoido

   on Mar 14, 2018

   More actions

   Is there any reason why you couldn't get the bundle name from the index.html file in the build directory?
2. openwms commented on Mar 15, 2018

   

   openwms

   on Mar 15, 2018

   Author

   More actions

   @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
3. sowhatdoido commented on Mar 15, 2018

   

   sowhatdoido

   on Mar 15, 2018

   More actions

   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
4. openwms commented on Mar 16, 2018

   

   openwms

   on Mar 16, 2018

   Author

   More actions

   @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
5. openwms

   closed this as completedon Mar 16, 2018
6. sowhatdoido commented on Mar 16, 2018

   

   sowhatdoido

   on Mar 16, 2018

   More actions

   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!
7. bologer commented on Jul 15, 2018

   

   bologer

   on Jul 15, 2018

   More actions

   @openwms another way in package.json:

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

   👍React with 👍3Reacted by copperseed, Nick Maskell and Roy de Jong
8. NateAGeek commented on Jul 20, 2018

   

   NateAGeek

   on Jul 20, 2018

   More actions

   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.
9. nathan-charrois commented on Oct 24, 2018

   

   nathan-charrois

   on Oct 24, 2018

   More actions

   @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.
10. bologer commented on Oct 24, 2018

    

    bologer

    on Oct 24, 2018

    More actions

    @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
    
11. lock

    locked and limited conversation to collaborators on Jan 9, 2019