loading...

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

github logo ・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.

twitter logo DISCUSS (6)
markdown 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.

 

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

 

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.

 

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 ?

Classic DEV Post from May 3 '19

What do you code to relax?

My projects have me jumping through hoops of a wide variety of technology, talkin...

shaijut profile image
I am a Full stack .NET Developer, I like to work with C#, Asp.Net Core, SQL, Mongo DB, Azure, JavaScript... Always eager to learn new technologies. I am here to share, ask & eventually learn.

dev.to now has dark theme. 🌝

Go to the "misc" section of your settings and select night theme

P.S. It's the best move you can make for your dev career.