Take it easy, bundle your Javascript and styles with webpack
Photo by Arnold Francisca on Unsplash

Take it easy, bundle your Javascript and styles with webpack

Recently my career consisted of backend and proprietary development.

Then I jumped back into the world of front-end tools.

I now work on a?Vue.js?application that is using?webpack. I had to do some research to understand better what webpack does.

webpack

Webpack helps you package your JavaScript, HTML, CSS, and images. Having written some front-end code in the prehistoric era this is a big step.

It is an open-source module bundler from?OpenJS. It is developed using?Node.js.

Problem

We used to have all sorts of issues with JavaScript dependencies. A bundler like webpack can remove the headaches.

To use a JavaScript library, you had to include a script for each functionality. Or create one big file.

How it works

Webpack works from the command line to bundle your assets. For instance, you may have a few JavaScript files, CSS, and images. It takes them all to create one file.

This makes it easier for the browser to download. Instead of having to download numerous small files you have one big one.

When to use it

Webpack helps you build complex front-end applications. Case in point, if you have numerous CSS, images, and fonts it can bundle them.

On the other side if you don’t have a lot of files to work with, just skip it. It can add some necessary overhead.

Kick the tires

You can test it out with this link to?StackBlitz. With a few commands, you can launch your own container.

It opens this terminal in the browser to run a few commands and launch the webpack container.

No alt text provided for this image
Command line interface launching container.

Then you see the page load. Quite simple and easy. A good way to test out webpack without installing anything.

No alt text provided for this image
Screenshot of webpage

Still relevant?

Webpack is still the default JavaScript build tool for many popular applications. So it is still in use and relevant today.

Alternatives

Webpack isn’t the only game in town. There are many others you can?use. Gulp, Babel, and Parcel to name a few.

Since I have worked on Node.js applications I have been exposed to npm. For these others, I have not used them. Do your research and choose wisely.

If webpack is right for your you may want to dig deeper?here. Otherwise, you may consider it for your next front-end application.

Like this and follow me on LinkedIn!

要查看或添加评论,请登录

Tom Henricksen的更多文章

社区洞察

其他会员也浏览了