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

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.

Comments

[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.

[Shaiju T]

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 ?

[Sid Vishnoi]

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.

[FJones]

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

[Shaiju T]

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 ?

[Shaiju T]

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