Introduction

Webpack is a Module Bundler and can also be used as a Task Runner with the help of loaders , plugins and extensions. Webpack supports most of the modern module systems in javascript such as AMD, CommonJS etc.

As per the definition there might be some words which may be unfamiliar. Don't worry, I will be explaining what each of these words mean, such that you will be having a better understanding on what webpack really is.

1. Module Bundler

Combining small pieces of javascript files along with its dependencies into a single javascript file is what module bundler does.

2. Task Runner

Automation of common development tasks like linting, building etc is what task runner does

3. Loaders

These are mainly used to preprocess files. Webpack makes use of loaders inorder to bundle any other static resources other than Javascript.

There are many loaders that are available for different purposes.

Example

css-loader - Loads CSS files with resolved imports and returns the CSS code

4. Plugins

Javascript object that has an apply method called by the webpack compiler, giving access to the entire compilation lifecycle are called plugins

Example

ExtractTextWebpackPlugin - Extract text (CSS) from your bundles into a separate file

Hope you got a brief idea of what webpack is. Next up I will be explaining on how to setup webpack and get started for your project, until then cheers :)

If you like this article, don't forget to give a thumbs up :)