loading...

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

shaijut profile image shaijut ・1 min read

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

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

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

pic
Editor guide
 

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.

 

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 ?

 

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

 

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

 

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.

 

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 ?