Webpack 4 and TypeScript from scratch

15 September, 2019.

Webpack is a fast, efficient, very powerful code bundler. TypeScript is a compiler (or transpiler if you prefer) which adds support for type checking to your project. Support for type checking is useful and powerful for enabling better development time tooling (such as improved auto-complete) and reduced runtime bugs. As your team scales to include more people, types help with the maintainability and structure of your codebase. You may not need to write your own Webpack configuration files…

Continue reading

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

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 can be better to have a more indepth understanding of the process, which can help with adding/removing functionality (and debugging) later. We will configure Webpack to do the following; Build our…

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…

Continue reading

How to create a production ready Webpack config

31 December, 2018.

You have a Webpack configuration file that you have been using for a while whilst developing your website, and now your ready to deploy your website to production. First, we need to set a Webpack . 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. The best place to set the mode is part of the your NPM script. We will use environment variables to make this work correctly. Note: There is a…

Continue reading

How to configure SCSS modules for Webpack

31 December, 2018.

SCSS is a popular choice for styling websites, thanks to features such as; mixins, variables and functions, which CSS historically never had native support for. One of the most challenging aspects of styling using CSS is the Cascade, meaning that elements can inherit style properties from many other CSS selectors. This can be problematic, and SCSS can be a solution to make this problem more managable. SCSS modules are usually directly tied to one specific component/element, and are not typically…

Continue reading

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

31 December, 2018.

Hot Module Reloading (HMR) is an essential tool in every front-end developers tool chest. When using Webpack along with Webpack Dev Server, with a little extra configuration you can easily enable HMR, which will get your changes in screen quicker and often whilst maintaining the state of your application. Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first. How to create a simple React application We are not trying to win any awards here, we…

Continue reading

Getting started with Webpack Dev Server

31 December, 2018.

Webpack Dev Server is a development time HTTP web server with built in support for Hot Module Reloading (HMR), which can help you rapidly build websites. HMR enables you to see your changes on screen much faster by enabling more incremental builds. How to set up Webpack Dev Server To use Webpack Dev Server, start as follows. Create a new file called in your directory and add the following code; Now we need to configure Webpack to inject script tags for our JavaScript bundle. We need to do this…

Continue reading