This article is part of the Webpack from Zero to Hero series, for more background or for the index you can check the “Chapter 0: History”.

Next - Chapter 2: Tidying Up Webpack.

Disclaimer: During this series I’ll be running Yarn, but if you like NPM better it is totally fine too 😄.

Introduction

In this article we’re going to start from an empty directory and proceed to build an application with dependencies, producing a simple bundle using Webpack with just a few lines of setup!

Starting a project

Open the terminal, create your project directory (or clone a empty repository) and create a new package:

yarn init -y

This will create your npm environment. Then create a simple file with some JS inside of it on src/index.js:

Install the dependencies

To install Webpack runtime and client we’ll need to do:

yarn add webpack webpack-cli --dev

Run the build

Now you’re ready to go. Just run:

yarn webpack

If you’re running with npm > v5 you can use npx webpack.

And the result will be something like this: