DEV Community

Shaiju T
Shaiju T

Posted on

7 2

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.

Top comments (6)

Collapse
 
sidvishnoi profile image
Sid Vishnoi • Edited

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
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
shaijut profile image
Shaiju T • Edited

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 • Edited

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 • Edited

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 ?

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay