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.

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.

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.

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”.

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 webpack.

Webpack 4 Zero Config

What this means is that webpack expects you to create an entry file called index.js inside an src folder, and then it will create and output the result in dist/main.js for you, without the need to create the configuration file yourself or do anything else.

I will assume you are always inside the folder we created in the first place (the one we named as “webpack_beginners”). So now let’s create a folder called src and also a file index.js inside it. In Figure 1-3, you can see a screenshot of what my folder tree looks like.

What we did here is to tell webpack to bundle our JS. If you wonder what a node_modules/.bin/webpack is, it’s just the path to our webpack command, which is basically a JavaScript file itself. There is a better way to call it for sure, and we will see this in a few moments.

After telling webpack to bundle our JavaScript, webpack will go and search for src/index.js and start from there, after executing the webpack command in your terminal. You will get an output similar to what is shown in Figure 1-4.

After the compilation is done, let’s take a look into our text editor (or IDE depending on what you use) and see what we’ve got in Figure 1-5.

Webpack created a dist/main.js file for us and compressed our code as well – but wait a minute! Don’t you see that our alert ('Hello Webpack World !') transformed to a strange code? I mean that there are more things added to it. Let’s wrap the code in our text editor and take a zoomed look, like it is shown in Figure 1-6.

If you noticed, our alert is at the very bottom, but you can see that there is a bunch of code that precedes it, which you don’t have to worry about or understand because it’s specific to webpack and how it makes the modules requiring functional.

The next step is to create an HTML file and make a link to our dist/main.js to see if everything works fine.

Save the file and open it in your browser. Yay – the code is working, and your first “Hello Webpack World” just pops out. See Figure 1-7.

While this is a very basic example of our first working JavaScript file bundled by webpack, it’s time to congratulate yourself! You did it, and you should be proud as you just made your first step in the webpack world. But before we move to more serious things, let’s talk a little bit about the bundling command and how we can use it in a friendlier way to tell webpack to compile our JavaScript.

The Bundling Command

So whatever you name it, you should call it with its name, but you will find that most people generally use “build” or “dev” in the webpack world.

Summary

In this chapter, we introduced the necessary commands to install webpack on our machine. We have seen the package.json file and what it basically does. Then we created our first JavaScript file and bundled it with webpack. Also, we explored the entry file and how it should be named in order for webpack zero config to work correctly. Additionally, we have learned how to run webpack command from our terminal.