Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Webpack demystified

Saturday, July 29th, 2017 by Servage

Unknown-1Webpack is one of the must-know tools for front-end developers who are working with Node.js. Webpack is a module bundler for JavaScript assets. However, it is also capable of doing much more than just that, making it a rather big and complex tool. Let’s clear the confusion around the many features of Webpack by checking what it’s most commonly used for and how it all works.

Bundling Files

One of the primary features of webpack is to bundle JavaScript files together. These files are often written by you and include npm packages that your application depends on. Webpack takes the files and dependencies and builds one JavaScript file, often called a bundle, from them. This bundle can then be easily loaded by web browsers. The benefit of having a web browser to load less files is to reduce the amount of required HTTP requests. Even in the case of local files, this makes loading web pages faster, and you only have to include one JavaScript file in the entry file of your application, which is usually index.html.

Including Dependencies

npm is a big part of JavaScript development these days. Almost every modern JavaScript application depends on at least one external module. These modules are installed using npm and can be included in your own code using Webpack. Webpack can be used to load modules using the popular import statement.

Code Splitting

Code splitting allows you to split your code into smaller bundles and to load them on demand. You can use code splitting to load features based on what page a user is on. For example, if a user is on a contact page, you can load the features to send an email without having to load the same features on every other page.

Webpack can also split your CSS files into their own bundles. This allows for better caching. Another advantage of doing this is loading CSS styles and your application in parallel. This prevents your application from quickly showing up with no CSS applied when the application is loaded.

Preprocessing Using Loaders

Webpack supports a large variety of loaders that can be used to preprocess code. For example, Webpack can be set to listen for changes in LESS and SASS style sheets and to transpile them to CSS when changes are made. Webpack is also capable of loading more complicated content into your application, such as HTML templates, Vue components and code written in newer ECMAScript and transpiling it to an older syntax. Loaders allow you to add content other than JavaScript to your bundle.

This was a quick introduction to some of the many features of Webpack. Webpack has much more to offer than we covered here, so we recommend to have a look at the Webpack documentation where all the features are covered in detail with examples.

Webpack demystified, 4.3 out of 5 based on 3 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.