Provide Best Programming Tutorials

Webpack Introduction

Webpack, as it’s official website said, is a static module bundler for modern JavaScript application.

The key point there are two things:

  1. module
  2. bundler

So let’s take a look at what webpack looks like from 1000-feet overview.

The left side represents modules, you can basically treat everything as a module such as a javascript file, a png picture, a jpg picture, a CSS file, a sass file, etc. You treat and use them as module and webpack do the nasty things for you — convert and bundle them into a file modern browser can understand.


So let’s talk about module first.

Nowadays, we have lots of implementations for Front-end modularization such as AMD, CMD, CommonJS, ES6 and with the help of webpack, we can choose to use either. Today, the most popular one is the ES6.

Before the advent of webpack, if developers wanted to develop front-end in a modular way, they had to figure out how to solve the modularity and deal with the dependencies of each module.


The packaging of webpack is to package and combine various resource modules in webpack into one bundle. Also, the resources are processed during the packaging process, such as compressing the image, converting the SCSS file into CSS file, converting the ES6 syntax to ES5 syntax, converting the TypeScript to JavaScript, and so on.

Comparison of webpack and Grunt/Gulp

Grunt/Gulp is a front-end automated task management tool whose core is to automate the entire project process, not modular.
Webpack emphasizes modular development management, and file compression and pre-processing functions are just a few of its features.

So below situations are fit for Grunt/Gulp:

  • If the dependencies of your project are really easy and have almost o modules.
  • Just a simple merge, compression operation

Leave a Reply

Close Menu