How to setup Webpack +2.0 from scratch in 2017 — Part II

Hej! This is the follow up on chapter 1, where we set up our first webpack.config.js and got it compiling. Hurray! But we want more, we want to use webpack to the fullest and explore each feature.

Quick reminder — this is where we left off.

How do we watch for changes?

Right now we are in a pickle. We need to re-run our compile task each time we make a change. Obnoxious… let’s fix this — it’s so simple!

We can specify arguments for webpack — type webpack -help in the terminal. This is what we should see.

Browsing through webpack options

As you noticed, webpack has a --watch or --w for short command. We can watch for changes! Very cool!

Let’s try it! type the watch command in your terminal.

webpack --watch

Let’s make add a new sentence to our index.js — make sure webpack is running with the watch method!

Open index.html with and wolaa!

Before we move on, let’s add our webpack watch method to the npm scripts.

Now we can use npm run watch for our webpack watch!

Cool but not impressive. What more does webpack bring to the table? I like your initiative!

ES2015 Compilation With Babel

It would be nice to use arrow functions() => {} with spread operator ... and probably the most convenient new feature which most of you have probably heard of — the one and only class {} syntactic sugar. Syntactic sugar? Is that some new coffee trend for hipsters? Almost… basically class {} does use prototype under the hood.

Following this great guide by babel, we can compile our ES6 to ES5.

Start it off with installing babel-loader and babel-core dependencies.

npm install --save-dev babel-loader babel-core

Let’s open up our webpack.config.js and write a couple lines of code.

We need to somehow use the babel-loader. What is a loader? The official documentation puts it in a perfect way — webpack has really nice documentation, don’t be shy to dive in!

Loaders allow you to preprocess files as you require() or “load” them. Loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle frontend build steps. Loaders can transform files from a different language like, CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript!

Thanks mr smarty, off we go writing our first loader.

module: {
    rules: [{
      test: /\.js$/, // files ending with .js
      exclude: /node_modules/, // exclude the node_modules directory
      loader: "babel-loader" // use this (babel-core) loader
    }]
  }

We specify a loader and set of rules. Webpack looks for all files ending with .js and compiles them with babel-loader

Let’s run our webpack.

It works. Can we test it? Sure, be my guest.

It works. But we still need to do one thing. We need to explicitly tell babel what and when to use. We can do that by using .babelrc file and babel preset plugins. I know it’s a lot to swallow but keep learning with me, you are doing great. I won’t dive too deep into babel presets — just know they are a set of predefined rules and we need to pass them to our babel so it knows what to do.

We are going to use the babel-preset-es2015 preset.

npm install --save-dev babel-preset-es2015

Next we need to make our .babelrc file.

Let’s open it and specify our rules/presets.

cool, let’s finally test it out. I’ll write some ES6 code and compile it down.

Make sure you have your webpack running! npm run watch if you forgot the command!

disclaimer: I don’t drive a bmw… yet

It works! Goooood jooob! We can successfully write ES6 code now without having to worry about compatibility issues! Next we’re going to focus on compiling our styles.

SCSS to CSS compilation

Easy! We just need to pull in a couple dependencies and specify a loader.

npm i --save-dev sass-loader node-sass css-loader style-loader

webpack.config.js

Right to left, sass-loader compiles SCSS, css-loader allows us to require the SCSS and style-loader injects it to our page.

Our webpack file is growing and no problem. It’s still managable, once it gets over 200 lines we will need to chunk it up to different files. But don’t worry, that will probably be part III or even part IV.

Let’s make our .scss file.

touch styles.scss

This is what we have so far

Shall we write some SCSS ?

Then require the scss file.

Make sure your webpack is running and let’s see our changes!

Neat! It works!

Summary

So far we figured out how to have webpack watching for changes, custom npm script, babel, babel-presets, webpack loaders, ES6 to ES5, SCSS to CSS.

Very good job and keep on learning! Thanks for making it to the end! You are awesome!

In the next chapter we will continue on our path. We’re not even close to done here! Stay tuned!

Next chapter here!

Please feel free to correct me if necessary!

Source Code