DEV Community

Shaiju T
Shaiju T

Posted on

How to bundle mutiple JS and CSS files into single bundle ?

In a static website, I want to serve single JS and CSS file instead of making multiple HTTP requests.

1. Lets say I have 3 JS file as below:

jquery.js
bootstrap.js
blog.js
Enter fullscreen mode Exit fullscreen mode

I want to bundle into one bundle home.bundle.js and it should bundled in correct order.

2. Lets say I have 3 CSS file as below:

font-awesome.css
bootstrap.css
style.css
Enter fullscreen mode Exit fullscreen mode

I want to bundle into one bundle home.bundle.css and it should be bundled in correct order.

For many hours I have tried this using webpack and parceljs but ran into many issues.

  • webpack is not bundling in order , some plugins are deprecated.
  • parceljs is adding some extra require JS code in the bundle and gives runtime error in console.

Any simple way to do this ?

Any help will be appreciated.

Discussion (6)

Collapse
sidvishnoi profile image
Sid Vishnoi • Edited on

If you want only to bundle them together, you can simply concatenate them instead of using the heavy and modern JS tools.

$ cat font-awesome.css bootstrap.css style.css > home.bundle.css
$ cat jquery.js bootstrap.js blog.js > home.bundle.js

If you're on Windows, replace cat by type.

Collapse
shaijut profile image
Shaiju T Author • Edited on

Thanks, yes offcourse I just want concatenate them. But just curious to know that's how bundling works isn't? Also I am using Windows, should I install any CLI to make cat or type work ?

Collapse
fjones profile image
FJones

This. Replace with gulp and gulp-concat if you need more than just combining.

Collapse
shaijut profile image
Shaiju T Author • Edited on

I was looking for simple tools like this one. But when I Google JavaScript bundle all I get was webpack or parceljs options. Thanks for simple solution. Appreciate :)

Collapse
ishalimi profile image
Halimi Ismail

Why webpack isn't bundling??
I think that you should give it a try and there a lot of plugins & configurations that can help you reach the wanted result.

Collapse
shaijut profile image
Shaiju T Author • Edited on

I did using this tutorial , and I tried a lot other options finally found that commons-chunk-plugin is deprecated. Do you have working solution or working webpack.config.js file ?