Webpack for Beginners: Your Step-by-Step Guide to Learning Webpack 4

By Mohamed Bouzid

Learn how to use Webpack from installation to configuration without the hassle of complex examples. Webpack has become one of the most popular module bundlers in recent years; it’s widely used by developers, companies, and organizations of all sizes, and many web frameworks use it for the management of their assets. If you are serious about web development these days then you must learn and understand Webpack.

You will begin by installing and configuring Webpack, and learn how to write modular code. You’ll then move onto understanding the usage of loaders and plugins with practical use cases, how to make aliases and resolve folders, cache busting, and installing third-party libraries such as jQuery, Bootstrap, QuillJS, and more. By the end of this book you will feel confident and ready to start using Webpack in your projects.

Free from complex examples and intended to be as easy-to-follow as possible, this book is ideal for anyone who knows basic HTML, JavaScript, and how to work on the command line. Upgrade your developer skillset using Webpack for Beginners today.

What You Will Learn

• Install and configure Webpack beyond the default settings
• Efficiently work with plugins and loaders
• Optimize Webpack for production
• Use instant refreshing with the Webpack dev server and hot module replacement
• Explore how to install some common JavaScript libraries

Who This Book Is For

This book is conceived for beginners and newcomers to Webpack, and assumes you have some very basic knowledge in JavaScript, HTML and working on the command line. This step-by-step guide will help you understand and clarify everything you need to know to bundle your JavaScript hassle-free. 

• Language: English
• Publisher: Apress
• Release date: Jun 25, 2020
• ISBN: 9781484258965

Book preview

© Mohamed Bouzid 2020

M. BouzidWebpack for Beginnershttps://doi.org/10.1007/978-1-4842-5896-5_1

1. Webpack: First Steps

Mohamed Bouzid¹ 

(1)

NA, Morocco

In this very first chapter, we will start by laying the foundation for our work by installing the tools we need in order to run webpack on our local machine. Then we will talk a little bit about the default configuration that webpack has introduced with version 4, called zero config. Next we will write our first hello world example, which as you might already know, is a mandatory standard when starting to learn anything new. Finally, we will talk very briefly about the webpack bundling command that we will use in order to build our final output files.

Installing Webpack

First of all, you need to have Node JS installed on your machine because webpack relies on it. If you don’t have Node installed, you can go to https://nodejs.org/en/download/ and follow the instructions based on your operating system.

To check if you have Node JS in your system, open up the terminal and type the following:

$ node -v

The next step after making sure Node JS is installed on our machine is to create our working directory/folder, which we will name webpack_beginners. Depending on your preference, you may have created it manually or via terminal like the following:

$ mkdir webpack_beginners

$ cd webpack_beginners

Once you are in the webpack_beginners folder, use the following command to initiate a basic JSON file:

$ npm init -y

This will create a file called package.json that will save references to our installed modules.

Via npm, the -y option is to answer yes to all prompted questions; it’s not that important for us at this stage, so we will just say yes to everything.

If you open the generated package.json file, you will see something similar to what is shown in Listing 1-1.

{

  name: webpack_beginners,

  version: 1.0.0,

  description: ,

  main: index.js,

  scripts: {

    test: echo \"Error: no test specified\" && exit 1

  },

  keywords: [],

  author: ,

  license: ISC

}

Listing 1-1

package.json: The basic generated JSON file

The package.json file will serve for NPM to identify our project (name, version, author, main entry file...) and handles the third-party dependencies needed for it to be fully functional. Assuming you are creating a JS library that you want to share on GitHub, etc., you might be interested in changing the name and the version above, and maybe write a description as well. But that’s not our focus here, to see more what this package.json file will do for us, let’s install webpack using our command line:

$ npm install webpack webpack-cli --save-dev

Note that whether you are in Linux, Mac, or Windows, the command is basically the same assuming you have NPM installed already on your machine, which is mostly the case if you followed the installation of Node JS correctly. The --save-dev option is to tell NPM that we need this just for our development purposes, meaning that these packages will be installed on our local machine only.

The command above will install webpack for us with its own CLI (command-line interface) . Once the installation command finishes, open the package.json file, and you should see something similar to what’s in Figure 1-1.

../images/494641_1_En_1_Chapter/494641_1_En_1_Fig1_HTML.jpg

Figure 1-1

The package json file after installing webpack and webpack-cli

Notice that webpack and webpack-cli were added with each one’s version under the devDependencies. Also notice that a new folder called node_modules was created, as well as another file called package-lock.json .

So, on one hand, in addition to the basic generated properties (that we have seen above) like the name of project, version, author, etc., package.json lists all the packages that your project directly depends on, meaning that whenever you install a new package from your terminal, that package name and version number will be added to package.json. The package-lock.json, on the other hand, is the full representation of the dependency tree of your project, including the indirect dependencies. For example, when you install webpack, other packages that it depends on will get installed as well. Package-lock.json will also contain the specific version of each module, so that if someone took your project later and ran npm install on their machine, they will get the exact same versions you installed. That way there will be no breakdown on the application (i.e., due to a package that got updated and has some break changes).

Now that we have our webpack installed, let’s try to open the node_modules folder and locate our webpack package. Figure 1-2 shows the exact location, which is under "node_modules/.bin".

../images/494641_1_En_1_Chapter/494641_1_En_1_Fig2_HTML.jpg

Figure 1-2

The file node_modules/.bin/webpack responsible for running webpack command

The file webpack above (under node_modules/.bin) is where the Webpack command comes from, so every time we need to compile our JavaScript, we'll call this file from our terminal. However, there is a better way to do this (which we will see in the next section) by making an alias command that will call that file for us instead of specifying the path to it. With that in mind, it’s time to write some basic code and start exploring the power of