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.


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



/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

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

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.

Solution Architect based in Oslo https://www.linkedin.com/in/dominicrobinson