Create-react-app: 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 [e-mail]:

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
https://github.com/facebook/create-react-app/issues/3365#issuecomment-376546407,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADFui640kEE-Ybe_4l8kTfFV5tPMnJ-Aks5tik0EgaJpZM4QMH82
.

--
Samuele Di Rito
Technical Consultant
Phone: [phone]
Phone: [phone]

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?