Webpack ≥ v4 — The Complete Guide

Part 2: Getting Started

First of all:

This is the part 2 of Webpack >= v4 The Complete Guide series. If you did not check the part 1 yet please do it first.

Before dive in:

In these series parts, I am going to take you with me in a stroll around webpack4, trying to understand and master its features and tools through variety of examples.

Step 1: Installation

Prerequisite:

Make sure that you have a recent stable version of Node.js. It would be better to use The LTS (Long Term Support) version of Node.js as a starting point.
At this writing time, my current installed Node.js version is (v8.12.0).

Please, run this command to check yours:

node -v

Oh, wait! We want to practice webpack not Node.js, Right?! So why do we even need to talk about Node.js?
In fact webpack is simply a Node.js application. So we need Node.js to run it.

Now that you have Node.js well installed, let’s create a directory named “webpack4-demo” and enter it:

mkdir webpack4-demo
cd webpack4-demo

Then set up a new npm package:

npm init -y

The -y will create a “webpack4-demo/package.json” with default values without asking you to override them.

Create “.gitignore” file

Ignore node_modules

Now, we are going to install webpack@4.22.0 locally to the dev dependencies.
As webpack@4.22.0 is the current version in this writing time, I am going to install it without specifying the version as below:

npx yarn add webpack -D

Otherwise, you can specify the version this way:

npx yarn add webpack@4.22.0 -D

Please take this package version specification while installations through this whole part.

As the webpack documentation says; if you are using webpack v4 or later you need to install webpack-cli.

webpack-cli is the tool used to run webpack on the command line.

So we are going to install webpack-cli@3.1.2 locally:

npx yarn add webpack-cli -D

Notes:

• You can use any package manager that responds your needs.
• npx is an npm package runner that comes with Node@8.2 and npm@5.2.0 or higher versions. npx here will install Yarn if it is not already installed in the machine, then will install packages using Yarn and end removing Yarn from machine (if it was installed by npx).

Step 2: Basic Setup

In this step we are going to write the source code.

Let’s create:
A directory named: “webpack4-demo/src”
A file named: “webpack4-demo/src/index.js”

This “webpack4-demo/src” directory will contain all source code that we are going to write and will be bundled using webpack.

Our example will use lodash library, so let’s install it locally as a dependency:

npx yarn add lodash

Now let’s write this code into “webpack4-demo/src/index.js” file

Step 3: Bundle Generation

In this step, we are going to generate the bundle.

Let’s first create:
A directory named: “webpack4-demo/dist”

This “webpack4-demo/dist” directory will contain the bundle that will be generated by webpack, let’s denote it “webpack4-demo/dist/main.js”.

In order to consume the generated bundle “webpack4-demo/dist/main.js” and load it to the browser, I am going to create manually (later, it’s webpack who will do that automatically by configuring a pluging — Just be patient please! — ) an HTML file named “webpack4-demo/dist/index.html” and call “webpack4-demo/dist/main.js” in a script tag in it as below:

Do not forget please to git ignore “webpack4-demo/dist/main.js”, but do not do for “webpack4-demo/dist/index.html” as it is not automatically generated by webpack yet.

You are now good to go and generate your first bundle using webpack. To do that, you should execute this command:

npx webpack

Congratulations =D

Note: Here, npx uses the binary of the webpack package that we’ve already installed in step 1.

I suppose that all goes right for you and you get the bundle named “webpack4-demo/dist/main.js”.

Note: The “webpack4-demo/dist/main.js” is a minimized and optimized output JavaScript file generated by webpack using its internal dependency graph as explained in the part 1 of this series.

Keywords worth to have their own explication:

• Minimized in the meaning that all white-spaces will be removed and all variables,functions,classes names will be minified.
• Optimized in many many meanings, as an example, when a script does not need to be loaded at all cases to the browser, webpack lets you configure something called Lazy loading so that it bundles that script into its own bundle and loaded it under need ending by reducing network bottleneck problem already mentioned in the part 1 of this series.

We will see lazy loading and more later in this series.

Notes:

• Dependencies, like lodash for our case, will be bundled by webpack in addition to “webpack4-demo/src/index.js”.
• DevDependencies, like webpack and webpack-cli for our case, will not be bundled by webpack, as their (DevDependencies) usage is limited to the development environment.

As you recognized, we did not configure anything to let import syntax works in “webpack4-demo/src/index.js” through import _ from ‘lodash’ and that’s because webpack support out of the box JavaScript and JSON modules importations and exportations. I take this opportunity to mention that by using webpack importation syntax we come to overcome scope collisions problem (no global scope pollution).

But wait, how does webpack know how it should bundle our project without setting neither the input file from where it should start bundling nor the output location where it should emit the generated bundle?

Well, by default, when we run webpack in a project root folder without giving it any CLI (Command Line Interface) arguments, it will generate the bundle by taking “webpack4-demo/src/index.js” as the entry point and “webpack4-demo/dist/main.js” as the output one.

Finally, open “webpack4-demo/dist/index.html” in your browser and you should see a button when you click on it, it alerts “Hello webpack4”.

Notes:

• Besides import and export syntaxes, webpack support other various ones like require.
• Old browsers are not ES2015 (EcmaScript2015) features up to date. As you probably recognized, we used in “webpack4-demo/src/index.js” an ES2015 feature which is the arrow function syntax (args)=>{body function code}. Our bundle will fail to execute in these old browsers. To support them, we must transpile ES2015 code or higher ES (ECMAScript) versions to ES5 (ECMAScript 2009) as it is the version the most supported by large amount of browsers including these old ones. In order to do that we should configure a transpiler such as Babel via webpack loaders (we will see that too later in this series).

Step 4: Using A Configuration File

As we saw, webpack4 does not require any configuration to bundle your project and uses default configuration in doing that. But in most cases we need to override this default configuration while projects webpack configurations are more complex than just keeping the default one. We can override this default configuration by using the webpack CLI or by creating a webpack configuration file. Using one or the other depends on the context and the complexity of the project. In most cases using a configuration file is more efficient as it is easy to maintain, to extend and to read.

So, let’s create our webpack configuration file named “webpack4-demo/webpack.config.js” that does the same bundling configuration as the default one does:

Now, let’s generate our bundle using our new configuration file as below:

npx webpack --config webpack.config.js

And if you set all things in the right place as I did, you should see your bundle file named “webpack4-demo/dist/main.js” successfully get generated and you can test it by opening the “webpack4-demo/dist/index.html” file in the browser.

Notes:

• If your webpack configuration file is named as “webpack.config.js” then it will be picked by default by webpack even if you do not mention it through --config command argument.
• You can name your webpack configuration file with any name you like, but you have to mention it through --config argument to be considered by webpack.
• You can have more than one webpack configuration file (e.g. one for development environment, other one for production environment and so on).

Step 5: Using npm Script

As said above (when I gave a note about npx in step 1), the npx webpack --config webpack.config.js command uses the webpack dev dependency installed in our project. We can use this binary (webpack) directly using an npm script without passing through npx. By this manner, you will not have to manually write --config (if necessary) all the time but write it once instead.

So, let’s modify our package.json as below:

Note: Referencing installed packages using npm scripts is a best practice, because it lets all project’s contributors use the same version of packages.

Now, run the command below:

npx yarn run build

Then, you should see your bundle “webpack4-demo/dist/main.js” get generated and when you open “webpack4-demo/dist/index.html” in the browser, your application should works as before.

Step 6: Conclusion & Perspectives

In this part 2 of this series, we learned how to setup, configure and build a basic project using webpack4. We also saw, how to use default configuration(using CLI) and to use a configuration file. We ended packaging the whole command in an npm script to be easily run.

In the next part, we will see how to manage, load and bundle assets like CSS, images, fonts and more in our project.

So stay tuned, I can’t wait to see you again with me in this webpack4 stroll. It is really an amazing human & technological feeling.

Thanks for your time.

If you have any feedback, suggestions or questions please let me know!

If you want to keep contact with me, please use the links below:

• LinkedIn
• Twitter
• GitHub