Webpack is one of the newer players in the build tool ecosystem – and if you often find yourself needing to bundle all of your JavaScript into one file and minify it in the process, it’s the solution you’ve been looking for.
Similar to Gulp and Grunt, Webpack is able to automate your day to day development, while ensuring that your code is returned to the user in its most optimized form. All three build tools allow you to bundle your js, compile your ES6 code, use SASS / SCSS, and more.
Unlike other tools, Webpack comes with a few assumptions by default. It assumes that you’re going to want to bundle your JS, and it assumes that you’re going to want to minify it in the process. Using Gulp and Grunt, you’ll need to download additional packages to bundle or minify your code. Since Webpack comes with these tools out of the box, we can spend less time configuring, and more time developing.
Let’s go through some of the basics so we can improve our load times and get our sites up to speed.
Installing Webpack
To install Webpack, all you need to do is run the following script in your terminal:
npm install webpack -g
With that in place, you’ll now be able to use Webpack to bundle modules and minify JavaScript.
Module Bundling
Bundling modules is quite simple as well. This allows you to cut down the amount of JS requests our app makes from many to one. Normally, our index.html file would look as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Up to Speed with Webpack</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="app.js"></script>
</body>
</html>`
Rather than making requests to these scripts one by one, we can bundle them into one with Webpack. In app.js:
var $ = require('jquery');
require('gsap');
require('three');
And since we’re using the require statement to pull our scripts, we’re going to need to install them via NPM or Yarn:
npm install jquery gsap three or yarn add jquery gsap three
Now if you run this in the browser, you’re going to get an error message saying require is not defined. This is where Webpack comes in. Compile app.js into build.js with the following:
webpack app.js build.js
Remove your extra scripts in index.html, and replace app.js with build.js:
<body>
<script src="build.js"></script>
</body>View the page in the browser, and you’ll see that we’re only making a request to one script instead of four:
Minification with Webpack
Now 1.7mb is obviously a very large file to be loaded across the web. Our main culprit is the large library THREE.js. Let’s shrink it by minifying our JavaScript:
webpack app.js build.js -p
With Webpack, we were able to decrease our overall file size from 1.7mb to 670kb – about a 62% decrease. Nice.
Adding the -p to the end of this statement will run Webpack in production mode, meaning it’ll take out any excess code you don’t need, while minifying what you do need.
Setting Up a Config File
It’s quite cumbersome to have to type webpack app.js build.js into the terminal whenever you’d like for your scripts to be bundled. Luckily, we can create a config file which will automate the process.
Create a webpack.config.js file, and insert the following:
module.exports = {
entry: './app.js',
output: {
filename: './build.js'
},
watch: true
}Entry is the file we’d like Webpack to compile, while the output filename is the destination we’d like app.js to be compiled into. Finally, setting the watch property to true will tell Webpack to watch for changes within app.js, and compile whenever one is made.
Run Webpack in the terminal with this in place, and you now have a fully automated build tool waiting to bundle your code.
This is just scratching the surface when it comes to Webpack optimizations – with a little extra setup, you can have Webpack do much more, including minify, prefix, and inline your CSS, compile your SASS, SCSS, and ES6 code, and lint your JS – but the tools that come with Webpack right out of the box are a simple site speed booster.
If you have any questions about what we covered or about Webpack in general, feel free to leave a comment below.
Chris is the Manager of Web and Mobile Development at Sparxoo, a custom web development company. He’s responsible for overseeing day-to-day development operations, ensuring websites are top quality and functionally-sound.