Why we need Webpack? (beginner friendly)

codegodzilla.com

3 min readOct 19, 2020

November 2020

What is Webpack?

Webpack is an open-source JavaScript module bundler. https://webpack.js.org/

For new programmers this definition is most likely confusing and it also doesn’t answer “why we really need it?”.

In this article I will explain it. Let’s get back to basics.

Prerequisites: Basic understanding of HTML, JavaScript, NodeJS, npm — You can checkout my website, where You find useful articles: codegodzilla.com

Task 1 — How to create a basic website?

Many students start the programming journey with React templates: ex. create-react-app scripts. Scripts like these create projects which have already Webpack configured.

Let’s create a super basic website, follow instructions:

1. Create index.html
2. Add some content ex. <div>Hello world</div>
3. Open the file in browser=> Congrats, now you have a website!

If you want to know how to use ExpressJS and how to deploy the website to Heroku — Check out articles at codegodzilla.com

Task 2 — How to include JS files?

HTML is cool, but if you want add functionality to a website, you need to include JavaScript.

1. Create a JavaScript file. Add some content for example: alert('hello world')
2. Link to that .js file in index.html
3. Open index.html in browser=> Congrats, now you have a website with basic functionality!

My project’s folder structure

/public
  index.html
/src
  app.js

You can link .js files like that:

<script src='../src/app.js'></script>

Task 3 — How you import functions from another JS files?

Any advanced website is using more than one JavaScript file. So let’s update our project.

Create a new file src/utils.js

const hello = () => alert('hello world');

And src/app.js has

hello();

In public/index.html

<script src="../src/utils.js"></script>
<script src="../src/app.js"></script>

Pay attention: If your JavaScript files are in a wrong order, then the function hello() is not found in src/app.js and you will get an error.

Congrats, now you have a website with multiple .js files. 🚀

So… how does Webpack help us?

Webpack does many things. But before I can answer the question in detail. Let’s create a simple webpack setup, then it will be easier to understand.

Task 4— Getting started with Webpack

npm install --save-dev webpack webpack-cli

Create config file “webpack.config.dev.js”

const path = require('path');module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

Update your npm scripts in “package.json”

"scripts": {
  ...
  "build": "webpack --config webpack.config.dev.js"
}

Now if you run npm run build it will create dist/bundle.js — It is a bundle of all the JavaScript files you imported! The entrypoint is defined in entry property defined in webpack.config.dev.js

Update src/app.js and src/utils.js

//app.js
import { hello } from './utils';
hello();//utils.js
export const hello = () => {
  alert('hello world')
}

Link the bundle (like you did before with multiple .js files)

//index.html
<script src="../dist/bundle.js"></script>

The amazing world of Webpack module bundling

Webpack has many benefits which are not covered in this article. But I will bring out few things. Following is not the full list, but it will give you a overview.

Webpack bundles all your JS files into a bundle (or multiple bundles).
Webpack transforms your code from TypeScript to JavaScript.
Webpack enables importing style sheets in your code, example:import main.scss
Webpack gives you hot-reloading.
…

Basically you need Webpack for a development and production environment. It takes your source code and transforms it into a deployable product.

How to use Webpack with TypeScript and React?

For that you need to read the next article, you can find it at codegodzilla.com

Ask me questions on https://twitter.com/codegodzilla

Peace 🍀