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:

gruntfile example

Verbose but does it’s job. Was one of the first frontend build systems for tooling. Thank you Grunt team!

Suddenly Grunt dropped the momentum ball and Gulp picked it up thanks to easier configuration.

gulpfile example

Gulp is awesome in it’s simplicity. It’s a good choice for easier projects no doubt. Thank you Gulp team!

But once you have a bigger and more resource heavy project going on, webpack is definitely the way to go. For example we need to compile Javascript, SCSS, require/import files, hot reload without effecting current state, bundle production builds, etc.

more complex front-end application

Webpack is here to save the day.

Here we are — it’s a tough street but cannot delay learning Webpack any longer. Most of employers expect you to know Webpack if you’re aiming for a mid/senior 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!

P.S If you’re on Mac and have homebrew installed, you can install node with this command brew install node

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.