How to setup Webpack +2.0 from scratch in 2017

Hello there. Let me begin by saying you’ve probably heard of Webpack by now and chances are you might know how to configure Webpack, you sir, are doing excellent. Good job, keep fighting! For the rest of us something like this might scare us off.

Webpack can be scary

What the fuzz is a proxyTable anyway? Why we do need so much junk in there just to compile our stuff? We’ll don’t worry, we will start from the very beginning.

This guide is for people who might have used Webpack before, heard of it or just curious of “new” edgy web tech. Without further ado, let’s begin!

“Warp fields stabilized— Activating time travelling to the distant past”

Webpack is just another evolving step in the tooling ecosystem. First there was Grunt. Compiling SCSS into CSS looked like this:

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});

grunt.registerTask('default', ['sass']);

Pretty verbose. Suddenly Grunt dropped the momentum ball and Gulp picked it up thanks to easier configuration. It looks like this.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});

Gulp is pretty good. It’s a good choice for easier projects no doubt.

But once you have a bigger and more resource heavy project going on, webpack +2.0 is definitely the way to go. For example we need to compile javascript, SCSS, require/import files, hot reload without effecting current state. do all kinds of stuff. Webpack is here to save the day. Full comparison here

more complex front-end application

Here we are. We have a tough choice and we cannot delay learning Webpack any longer. Currently most of employers expect you to know Webpack if you’re aiming for a mid/senior Single page application frontend developer position. I will try to make this as easy as possible.

All right, whatever, I’ll do it.

Great!

Things we are going to need for Webpack are the following:

Basic knowledge of Nodejs
NPM
Basic knowledge of terminal
Text editor. (Any will do)
*nix type of operating system (Mac or Linux)

1) Head over to https://nodejs.org/en/ and download the latest version and install it. It’s a pretty basic GUI installer, you can do this!

After your installation, head over to your terminal and type:

node -v

Congratulations, you have Nodejs installed! Now wasn’t that easy?

NPM comes with Nodejs. NPM stands for Node Package Manager. NPM basically allows you to use existing code people wrote for you!

2. Now we’re cooking. We have Nodejs and NPM installed and we’re ready for our easy Webpack setup.

Lets start by making a new project. You can name it anything you wish.

Alright. So we made our project. What next? Navigate to the project and let’s initialise (fancy word for starting) a brand new Nodejs project.

So what’s this? First of all we navigated to the project folder/directory. After that we started up a Nodejs project. This is the basic configuration file.

ls - list directory contents

Read more about package.json if you feel curious — and you should, don’t be shy!

The reason why I’m not typing the commands out is because I want you to think along and write out every command yourself! :)

Alright cool, we’re making progress.

We also need our index.html, webpack.conf.js and index.js file(s). So let’s make them!

It’s time to bring out the big guns and open the project with your preferred text editor. Our project should look like this. If it does, alright take a coffee break, you deserved it. We will finally start make sense of all of this and work our way to Webpack.


3) Alright! Ready? We start by installing dependencies for Webpack.

We are installing Webpack and Webpack development server. We need a HTTP client to serve our files, that’s why we’re installing the dev-server.

After the installation is complete, take a look into node_modules

Don’t be scared! We probably never need to touch any of these files. By the way we call these dependencies. These are the files Webpack needs.

As we can see, we successfully installed dependencies. Think of package.json as the gatekeeper to all dependencies our Nodejs project needs. package.json Will store all out dependencies right here.

4) Configuration for Webpack itself

Alright, we have everything we need. Now it’s showdown.

Open up webpack.config.js and start by requiring webpack. We need to tell Webpack somehow he has everything he needs.

We are using CommonJS modules for requiring files. http://requirejs.org/docs/node.html More here, don’t worry we don’t need any more dependencies. Nodejs has Commonjs out of the box.

How will webpack know what file to read? That’s a great question. He doesn’t! We need to define a starting place. Oh and by the way, we need to be able to “spit” out the output for the browser as well. Basic workflow goes like this: We write code, webpack reads it, compiles it, spits out a compiled version out for the browser.

It’s not that hard is it? It’s easy!

What now? Well.. how does the outside world (outside of this file) know about this file? We need to export it to the outside world. (allow the rest of world to read it).

There we go! We have our very basic webpack file.

Okay cool, so how do we activate it?

Well we need to do three quick changes.

Every web file has at least one single .html file. This is where the browser starts working with us. What we need to do is point our Webpack ouput to the index file. We can include it with a simple <script></script>

Alright cool. Now we need to install the webpack globally for manual testing. If you’re not very familiar to Node ecosystem don’t worry.

But we just installed webpack didn’t we?? What do you mean we need to install it again. Well it’s different this time. We need to install it globally this time. Globally? You mean like my friends can see it? Well yes and no. Your personal computer has access to it outside of a Nodejs project. Confusing I know.

“Alright, how much more?”

Not very much! We can start writing our code! Look! Open your index.jsfile and write something.

Are you ready? Let’s run our Webpack!

Oookay… what’s this? Oh this basically a report log what Webpack has done. Webpack is like this loyal butler who tells you everything he did for you.

Now lets open our index.html and see the results!

Well done! You just made your very first Webpack project. We will cover how to leverage all of the basic functionality, like watching for file changes, compiling SCSS to CSS, hot reload in the next chapter. The article literally ran out of space.

Next chapter here!

Source Code

You made it!

Keep fighting and learning, thanks for reading!