Read responsibly, check out my disclaimer page.
This week I will be explaining how to install webpack. I will split this up into 2 parts.
I took a JavaScript course on udemy and within that course, there were two projects. One of the projects required me to install and configure webpack and babel. I still didn’t quite understand how and why certain configuration parameters worked the way they did, so I took a detour went on a journey to figure things out on my own. In my humble opinion, the best place to learn how to install webpack, is within the webpack Docs.
For those of you who do not know what webpack is, I will create a separate blog post in the future briefly explaining the it, but for now, you can visit their website: ( I will also create a separate blog post on babel.
When I first installed webpack, like most individuals who begin to dabble in webpack, I was so friggin lost! When I stood back and looked at the big picture, It was quite overwhelming to see so many moving parts. For those of you who feel the same way, don’t worry, I’ll break it down for you.
I can be anal when it comes to understanding how a particular technology works. I hate to copy and pasting in lines of code without understanding how it works. I’ve been burned by that ‘fire’ one too many times when I first started programming.
You know what I mean; copying a line or a block of code, pasting it in your project, having your code break, you figure out that the problem is the code you copied and then come to the realization that you have no idea how the block of code that you copied works, therefore you can’t even make adjustments to it….no adjustments, equal no fix. Now, take what I just stated with a grain-of-salt. I am not suggesting you attempt to understand how ins-and-outs of webpack…spending time trying to know how this beast of a software works is pointless especially if you’re on a time crunch, just open up a bundled file (in production mode ) and you will see what I’m talking about….yet, pointless. I’m mainly referring to a base understanding of how the code works.
So what do you do? Search google and find another block of code? No! Spend time understanding the components of the code before you implement it in your project! Read docs, read them over and over again if you have to. It will save you a lot of time, trust me.
Anyway, with that being said, I’ve spent a lot of time within the past 2 weeks, in counting, installing and uninstalling webpack on the Ubuntu operating system. During this process, I’ve ran into a bunch of problems; which was quite frustrating.
I will share the problems I experienced in a another blog post.
Ok so let us begin:
First, you gotta install Node.js and npm:
Node.js is an open-source cross-platform JS run-time environment. It provides you the ability to execute JavaScript code on the server-side. What does this mean? It means that your JavaScript code will be executed directly on your machine ( the server ) and not on the client-side ( the user’s computer ); you’ll have a server sitting on your lap ( if you using a laptop).
We will be using npm to install webpack.
“Why do we need Node.js if we’re going to use npm to install webpack?” – Great question. Npm is the default package manager for Node. Most, if not all of the npm packages were built for node. So save yourself the headache and just install node. Don’t worry there really isn’t much you need to do get npm running.
We will be installing node from Ubuntu’s repository, so lets first update the package information on our Ubuntu system; updating the versions for each package, dependencies and all.
sudo apt-get updateInstalling Node:
sudo apt install nodejsVerify the installation:
nodejs --versionNext, we will need to install a bunch of packages that will be needed for software building:
Execute the following:
sudo apt install build-essentialShort blog post eh? No worries, part II is a bit longer.