How to bundle all js, css and images files as one file using react-scripts? #3365

Activity

1. Timer commented on Oct 31, 2017

   

   Timer

   on Oct 31, 2017

   Contributor

   More actions

   Unfortunately, we do not allow tuning like this -- you'd need to eject.

   What specific use case are you trying to accomplish?
2. willowTank commented on Oct 31, 2017

   

   willowTank

   on Oct 31, 2017

   Author

   More actions

   Thanks for your reply. I want all assets files are combined as one file.

   👍React with 👍1Reacted by Nick Pomfret
3. Timer commented on Oct 31, 2017

   

   Timer

   on Oct 31, 2017

   Contributor

   More actions

   Yes, but for what reason? Why do you have this requirement?

   Also, if you eject you can configure all assets to go through file-loader instead of url-loader, & disable extract css plugin.
4. gaearon commented on Nov 3, 2017

   

   gaearon

   on Nov 3, 2017

   Contributor

   More actions

   What do you mean when you say “one file”? Which particular assets do you want to see combined and why?
5. gaearon

   added

   priority: low (needs more information)

   on Nov 3, 2017
6. Timer

   closed this as completedon Dec 8, 2017
7. samueledirito commented on Mar 27, 2018

   

   samueledirito

   on Mar 27, 2018

   More actions

   Sorry to reopen this old thread, but I have the same question.
   Has anything changed? Do I still need ejecting the app to have it all in one bundle.js file?

   I'd like to use Zalando's Tailor to move into microfrontend world. This lib requests to serve a single file with js and css all together.

   Thank you ;)
8. msurdi commented on Mar 27, 2018

   

   msurdi

   on Mar 27, 2018

   Last edited by msurdi

   More actions

   I've finally worked around this problem, without the need to eject, by just creating a webpack.config.js file at the root of my project with:

   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()],
   }
   

   And adapting the build script in my package.json file like:

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

   Hope this helps others.

   👍React with 👍19Reacted by Felix Gliesche, Debabrata, Juan Carlos Farah, David Young, Elias Selvanovich, Daniele Cruciani, Eugene Kirvas, Bruno Portis, Clay, Cliff Kamppari-Miller and 9 more

   😄React with 😄1Reacted by Cliff Kamppari-Miller

   🎉React with 🎉1Reacted by Cliff Kamppari-Miller

   ❤️React with ❤️3Reacted by Cliff Kamppari-Miller, Mehdi HAMIME and johneisenheim
9. samueledirito commented on Mar 27, 2018

   

   samueledirito

   on Mar 27, 2018 via email

   More actions

   Not the most clean way but it absolutely works and I like it!! :D Thank you very much for your share! 2018-03-27 16:30 GMT+02:00 Matias Surdi <notifications@github.com>:

   …

   I've finally worked around this problem, without the need to eject, by just creating a webpack.config.js file at the root of my projec,t with: 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()], } And adapting the build script in my package.json file like: ... "build": "npm run build:react && npm run build:bundle", "build:react": "react-scripts-ts build", "build:bundle": "webpack --config webpack.config.js", ... Hope this helps others. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3365 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADFui640kEE-Ybe_4l8kTfFV5tPMnJ-Aks5tik0EgaJpZM4QMH82> .

   -- Samuele Di Rito *Technical Consultant* Phone: 389-1541626 Phone: 349-9040487 *Learned in:* ASP.NET | WPF | Silverlight | Java | Docker | Networking | Spring | Hibernate | Batch | Scala | EntityFramework | Dapper | Influxdb | GraphQL | Angular 1.x | Vue.js | React | REST | SOA | Mongo | Sql Server | IIS | Nginx | Networking | Angular | Bash | Eclipse | VS Studio | Elasticsearch | SMACK | LagomFramework
10. mreliopez commented on Aug 31, 2018

    

    mreliopez

    on Aug 31, 2018

    More actions

    @msurdi good sir, you're a life saver
11. xyklex commented on Sep 10, 2018

    

    xyklex

    on Sep 10, 2018

    More actions

    Just to give an use case for this is that I would like to use Cloudfront signed url to deliver access to just one file (index.html) and without the need to request others access, because that will require that I create a signed url for each one, or without using signed cookies, because right now API gateway does not allow to return multiple Set-Cookie headers.
12. AlBannaTechno commented on Sep 28, 2018

    

    AlBannaTechno

    on Sep 28, 2018

    More actions

    Thanks
    and for the best case we will need just one bundle.js file
    when we use electron
13. robertclarkson commented on Nov 22, 2018

    

    robertclarkson

    on Nov 22, 2018

    More actions

    I've finally worked around this problem, without the need to eject, by just creating a webpack.config.js file at the root of my project with:

    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()],
    }
    

    And adapting the build script in my package.json file like:

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

    Hope this helps others.

    This was great but my app was not bundling correctly as there were 3 JS files that had to be bundled, not just main.hash.chunk.js

    I just had to tweak the webpack config to include all files:

    entry: {
        "bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
      },
    

    👍React with 👍2Reacted by Arnaud Barré and Courtney Christensen
14. npomfret commented on Jan 3, 2019

    

    npomfret

    on Jan 3, 2019

    More actions

    Is there a way to inline everything (all css and js) into a single html file?
15. lock

    locked and limited conversation to collaborators on Jan 8, 2019