Webpack Setup: First Steps

Webpack’s documentation is very good, but I wanted to document a very simple few steps to setting up Webpack, as a light introduction for those who want to see what it does before jumping in.

I prefer to use yarn over npm as I personally find it easier and more reliable. In most casts yarn & npm are interchangeable.

Setup

Create a new directory for your app and initialize it. Yarn will ask you some questions, which you can leave as the default by pressing `return` for each.

yarn init

Next, install webpack, plus webpack’s CLI. These are added with the --dev flag as they are only needed for development, they aren’t modules needed for your application once it is built.

yarn add --dev webpack webpack-cli

Files

In your directory create 2 empty folders:

/dist
/src

/src: contains the source files that webpack will build from.
/dist : where the code will be built to.

Webpack is configured by a JSON file, which you need to create. For this demo create a new file called webpack.config.js in your directory.

A little about the contents of this:
entry: define the starting point for webpack to go looking for your code, which can be either in that file or linked to it (e.g. using require()).
output: This defines the path and filename that all your code will be compiled to.

Let’s create our /src/index.js file, as simply as we can:

We’ll create a simple HTML file in our /dist/ folder, /dist/index.html, which will include the compiled javascript file that webpack will build, not the source.

Building your code 2 different ways

To build your code you can use the command line that you have open in your directory to trigger the default webpack process:

yarn webpack

Once that completes, open your /dist/ folder and you should see a bundle.jsfile in there. Open the index.html file in a browser, open the console, and you should see “Hello World” appear.

As webpack’s build function can run with several options, we usually create a shortcut in the package.json file by adding a script function to package.json, (don’t forgetting to add a comma before or after to keep it a valid JSON file):

....
"scripts": {
   "build": "webpack --mode production"
  }
....

This doesn’t do much for now but as you develop more complex builds it can simplify your workflow a lot. To build your code you can now also use the command:

yarn build

Hot Reloading Development Server

When you are coding your app you don’t want to have to build it after every code amend in order to test it. Webpack comes packaged with the ability to run a local development server from your directory, which will trigger a rebuild every time it detects an updated file.

To install the development server run:

yarn add --dev webpack-dev-server

In package.json add a new property to the “scripts” object:

"dev": "webpack-dev-server --open --hot"

Your package.json file should now look something like:

At the command line you can now run:

yarn dev

This will start a local server and open your default browser, showing your working directory. Yarn will tell you the URL and output directory in case your browser doesn’t open. In our example, the output directory is /dist/ so click on that in the browser and our index.html page will load, with Hello World showing in the browser.

Now go to /src/index.js and edit your Hello World content. Once you save your file go back to the browser and in the console you will see that your changes have been reflected there. As long as the server is running, any changes to your content files will be reflected there.

To stop the server, Windows users press Ctrl+C twice in the command line window running the server.