DEV Community

Shaiju T
Shaiju T

Posted on

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

#help #javascript #webpack #webdev

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 ?

Read next

titusefferian profile image

How to use Stable Diffusion 3 to generate a similar image.

Titus Efferian -

tere_joe profile image

Understanding CSS Cascade, Selectors and Specificity

Nzeamalu Nkechinyere Tere-joe -

ashsajal profile image

JavaScript Event Loop Explained in 1 minute.

Ashfiquzzaman Sajal -

sha254 profile image

Upload and Delete file from Amazon S3 Bucket in Go using Presigned URLs

sha254 -