Webpack

Getting started with Webpack Dev Server

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…

Continue reading

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

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 application We 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…

Continue reading

How to configure SCSS modules for Webpack

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…

Continue reading

How to create a production ready Webpack config

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…

Continue reading

How to process images with Webpack

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…

Continue reading

Webpack 4 from absolute scratch

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…

Continue reading

A bare bones React boilerplate, featuring Webpack 4, React, Redux, Jest, and Babel 7

I love template projects. In fact, I use them all the time. Template projects, seed projects, starter projects, whatever you want to call them, they are fantastic. Starter templates help you get up and running very quickly and can be very useful and powerful when learning something new. Many template projects I see around the web are bloated with every feature under the sun. Having a long list of features can be amazing, however, some projects have grown significantly… which can increase…

Continue reading