Getting started with WebPack Dev Server (with ES6)5 min read

Lately, Webpack is making noise around the web, especially in the React community. In this tutorial, we’ll go over what Webpack is and how we can use it to create a super light weight, yet powerful Javascript boilerplate.

What is Webpack?

Webpack takes modules with dependencies and generates static assets representing those modules. What does this mean in plain english? It means that Webpack will figure out the dependencies of your javascript source and pack them together in a nice and clean way. Webpack also has a wide variety of plugins that can perform common code optimizations such as minification (js and css), transpilation (babel), auto base 64 image conversion, and much much more!

Installing Webpack

Make sure you have Nodejs and NPM installed on your local computer. We need to install Webpack from NPM, you can either install it locally or as a global module:

npm install webpack -g

Next you should create package.json file or clone the demo package.json from our code repository

We’ll be using various loaders for webpack. Loaders are things webpack use to transform resources into javascript. Some of the loaders we’ll be using in this tutorial are css loader, sass loader, and babel loader.

We’ll also be installing a webpack dev server, which will act as our localhost server that listens to our resources and hot load on the fly (more on that later).

will tell Webpack to look for all files with .js extension, run it through babel loader, which transforms ES6 (or Javascript 2015) code to ES5 compatible code via Babel, this means you can start writing ES6 code today!

Plugins

Plugins are various webpack related plugins that enable magical things like hot reload (more on that later).

index.js

Since our entry point starts at src/scripts/index.js, let’s look at what it contains:

It imports add function from add.js using ES6 imports and sets sum to equal to the result of add(5,4) and export it as the default value of this module. This way we can output the value of sum from index.js

Lastly, we look at the base.scss file we’ve imported that contains the entry point to our style sheets:

You should see a pattern by now, we’re able to modularize our code via imports or includes, and Webpack makes it very easy for us by figuring out all the dependency chain.

Let’s test this, head over to the command line and type in:

npm start

and head over to localhost:1337 and you should see your sample page running.

Hot Module Replacement

Webpack’s Hot Module Replacement is a really cool feature that will speed up your development time.

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload.

Comparing this to something like Gulp or Grunt’s Live Reload, this is a step above that, because it will instantly swap out modules that are updated on your page and replace it on the fly, you will be able to retain the state of your page (for example, text inside a text box or a game state). like Magic!

Demo time!

Let’s change greet.js to:

module.exports = 'Hello World';

press save within your favorite code editor and see what happens. If you did it right, you should notice your browser instantly reloads the greet.js module and updated the alert text to say ‘Hello World‘!

You can hot reload CSS too! Let’s change colors.scss to:

$defaultColor: black;
$textColor: yellow;

press save and you should see your text color changing to yellow on the page. Cool isn’t it?

That is it for an introduction to Webpack, and we havn’t even cover the full potential of Webpack. You can learn more about Hot Module Replacement here. Stick around for more Webpack related tutorials from us in the near future.