Continuous Development Without Hitting Ctrl + R with webpack 4

A while ago, when building a lot of front end applications, once a change is made, the browser needs to be reloaded every time. At that time, this didn’t seem like a problem at all. As the saying goes, necessity is the mother of inventions. How about we not having to manually reload our browser when we make changes to our applications? In comes webpack!!!!.

webpack is a static module bundler that has come to stay in the development of our modern javascript applications. This only makes sense though because having to manually refresh the browser every time a single change is made to the application can get really tiring.

Table of Contents

webpack take all the modules in your application ( HTML, CSS , JS, Fonts ) and continuously builds a dependency graph of your application then puts them into one or more bundles. Now the only little caveat is it’s configuration. Most people shy away from webpack because they have a conception that the configuring webpack for your application is too much of a herculean task that they’ll rather not use it. In comes webpack 4 - code name - with very little configuration needed to get you up to speed!

Create a directory called src which will contain our necessary source files

mkdir src
cd src
touch index.js

In our index.js , we have the following:

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Nice!

Check your email to confirm your subscription.

alert("It's going to rain today! Take your umbrella");

Using webpack with Zero Configurations

In previous versions of webpack, we would need to create a webpack.config.js file to specify at least the :
entry point - Where the dependency graph should start from
output - where the resulting bundle should be stored and what name to give to it

With webpack 4, wait for it …. you can get started with ZERO CONFIGURATIONS!!!

webpack automatically assumes the **./src/index.js** for the entry point of our project and will automatically spit the result to **./dist/main.js** . Of course, this can be altered to fit our custom needs.

In our index file above, we include the built bundle created by webpack ( see line 11 ). Now when we run it, we get the following :

Adding the webpack Dev Server
At this point, we need to run npm run dev every single time for webpack to re-bundle our assets. This is not the most ideal way to do things. In comes the webpack-dev-server . The webpack development sever will launch a browser window and refresh your window whenever a change to a file is made.

To install the development server, run the following command :

npminstall webpack-dev-server --save-dev

The webpack development server is not intended for production mode

Once this is done, we need to edit our package.json again to have the following

Now that we have gotten the basics of how webpack works, let’s take a deeper look at the webpack 4 configurations and how we’ll use them in our weather-forecaster application.

First, we need to create our webpack.config.js as this will hold all our webpack configurations.

touch webpack.config.js

If the scripts for your application is such that they need to be compiled into more than one bundle, then we need to specify our entry points but before we continue, we need to talk about two other webpack concepts :

Plugins

Loaders

Configuring Plugins
Earlier on, we manually created our index.html file ourselves. This is not the only way to get our index.html file. We can make use of the html-webpack-plugin . We will not look at how to dynamically generate a our index.html

Firstly, we need to delete the manually created index.html

Install the**html-webpack-plugin**

To install the webpack-plugin, we run the following command in our terminal :

npminstall html-webpack-plugin

Create**index.html**template

In our src/ folder, we create an index.html template file which our final page will be built from.

We specify where the template is and also enter what title we intend to give our page.

Configuring Loaders
By default, webpack only loads javascript files. To allow webpack load other resources like css, ts, scss , we are going to make use of Loaders. We will be using the css-loader that helps collect CSS from all raw referenced css files and the style-loader will then place the output obtained from the css-loader and put it inside the <style> tags in the index.html file.

In this article, we looked at the basic steps involved in getting started with webpack 4 using zero configurations. We also looked at how to enable automatic and continuous live reloads using the webpack dev server. There’s still so much more that can be done w webpack but you’re well underway to suing it confidently in your applications. Here’s a link to the full github repository if you’re interested.

Jobs!

If you’re familiar with popular JavaScript frontend frameworks like React, Angular, etc, then the concept of ECMAScript won’t be entirely new to you. ES Modules have the import and export syntax we see often in frontend frameworks. Node uses CommonJS which re...