How to bundle mutiple JS and CSS files into single bundle ?
#help#javascript#webpack#webdev
Shaiju T

Shaiju T @shaijut

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

Location:
India
Joined:
Dec 23, 2019

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

Publish Date: Jan 4 '20
22 6

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.

Comments 6 total

  • Halimi Ismail
    Halimi IsmailJan 4, 2020

    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
      Shaiju TJan 4, 2020

      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
    Sid VishnoiJan 4, 2020

    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.

    • FJones
      FJonesJan 4, 2020

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

    • Shaiju T
      Shaiju TJan 6, 2020

      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
      Shaiju TJan 6, 2020

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

Add comment