How to configure Webpack Hot Module Reloading (HMR) using Node.js API

04 April, 2019.

You recently had some reason, probably work related, to configure Webpack from scratch using the Node API. This is because of reasons (for example, you are moving your Webpack configuration into an NPM package), and you found the documentation somewhat lacking!!You quickly became frustrated and decided to search for a tutorial, and now, you are here. Welcome friend!! I too have felt your pain. The Webpack documentation is lacking at best so it is up to community members like myself to fill in…

Continue reading

Getting started with Webpack Dev Server

31 December, 2018.

So far, our application writes out to the console, which is not terribly helpful. Let’s get something up and running in the browser before we configure our React code.To get our website up and running, we will need Webpack Dev Server, which is a simple HTTP server. We will also need a couple of plugins to make everything work properly.Start by creating an file in and add the following code;Now we need to configure Webpack to inject the path to our JavaScript bundle directly into the HTML file…

Continue reading

How to add Hot Module Reloading (HMR) to a React app

31 December, 2018.

Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first.Create a simple React applicationWe are not trying to win any awards here, we only need to get React rendering out something so we can move on. This is not a tutorial about how to build a useful React website, after all.Start by installing React, and ReactDOM. Both are required to render a React browser-based web application.Note: These are runtime dependencies, so we use instead of .Open…

Continue reading

How to configure SCSS modules for Webpack

31 December, 2018.

Your website will look pretty plain without some styles. SCSS is a popular choice for styling and is fairly straightforward to configure.We will focus on SCSS modules and global SCSS, so let’s get started.Run the following command in your terminal to install Sass and related tooling;What are these packages for? provides binding for Node.js to LibSass, a Sass compiler. is a loader for Webpack for compiling SCSS/Sass files. injects our styles into our DOM. interprets and and resolves them…

Continue reading

How to create a production ready Webpack config

31 December, 2018.

We have seen the basics of a Webpack config, but let’s take a few steps to make the config more production ready and useful for development.First, we need to set a Webpack . We have touched on this a couple of times so far as part of this tutorial. The will determine if Webpack minifies/compresses our code, or not. This is important to get right because it makes a huge difference to the resulting bundle.Set the wrong , and you will not be able to debug your code in the browser, or worse, deploy…

Continue reading

How to process images with Webpack

31 December, 2018.

With a couple of small Webpack plugins we can add the ability to be able to import images directly in our JavaScript files, and also process those images (compress them).Run the following command in your terminal to install the required plugins;What are these packages for? resolves your s and copies the file to the output directory (usually with a randomly generated name, for cache busting) processes the images using another package called Note that takes many options. For a more comprehensive…

Continue reading

Webpack 4 from absolute scratch

31 December, 2018.

Writing your own Webpack 4 configuration from absolute scratch is not strictly necessary. You could go online, find a basic Webpack configuration file and fork it/copy it to your project and use that as your starting point.Whilst using a starter project is good for getting started quickly, it is better to have a more indepth understanding of what is happening, to help with customisations and debugging later.We will configure Webpack to do the following;Build our JavaScript, use Babel and various…

Continue reading