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

[willowTank]

Dear Sir!
I would like to bundle all assets files as one js file.
I am using react-scripts.
Please help me.
best Regards

[Timer]

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

What specific use case are you trying to accomplish?

[willowTank]

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

[Timer]

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.

[gaearon]

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

[samueledirito]

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 ;)

[msurdi]

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.

[samueledirito]

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

[mreliopez]

@msurdi good sir, you're a life saver

[xyklex]

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.

[AlBannaTechno]

Thanks
and for the best case we will need just one bundle.js file
when we use electron

[robertclarkson]

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

[npomfret]

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