What is webpack | How does it work ? | examples

Introduction

            Nowadays we have lots of choices to make web applications all modern days javascript libraries like  React.js, Angular js, etc all of these libraries require something to compress code and make it production-ready, that's exactly when webpack comes into the picture, webpack makes our job easy to minify code, transpile, create dev server, etc. 

What is webpack?

        webpack is a module bundler. which bundles everything in our project e.g images, javascript files, CSS, assets, etc. 

Why do we need a webpack?

    webpack provide really cool features lets have look at it one by one.by the time I am writing these article webpack 4 has released.

Minify Code

        the major issue with javascript applications is that it consumes lots of memory. among the entire code, some of the code is always either of no use, just comments, spaces, etc. if we remove that extra space our file size will be less and also load faster also code quality will improve.

 Transpile

        almost every year since 2016 ECMAScript release a new set of standards to make things easy and suitable but till today very few browsers fully supporting to ES6 standards but ES10 already released the majority of browsers support ES5 even today's date. it's clear that it will take a lot of time for browsers to make their javascript engines compatible with all the latest ECMA standards. due to that browsers use technique called transpiler which converts ES6 code to ES5 code. this is how most of the browsers nowadays support websites that have created in modern advance javascript. webpack helps to transpile code by the time of build.

Dependency graph

      a dependency graph, the name itself suggests that it makes a graph about dependencies in the project i.e which file import another file. it starts from the main file in most of the cases its index.js and moves forward as per imports.

     a dependency graph is important to avoid circular dependence. circular dependency is a situation which occurs when one file imports the other file and other file import that file again.

e.g .if file A importing file B and file B importing file B then, in that case, it creates conflict at run time. webpack helps to avoid that.

 webpackDev servers

        webpack also allows us to create dev servers i.e local server for development purpus its useful for developers because it refreshes content automatically after code changes save.

Follow setps

Installtion

npm install --save-dev webpack
npm install --save-dev webpack-cli

# or specific version

npm install --save-dev webpack@
npm install --save-dev webpack-cli

Setup Entry point and Destination Folder

webpack always searches the src folder by default to start with. which is called Entry point this is the path where it starts creating a dependency graph. we can change it's a path in case we have a different start file location. like given below

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

change destination folder location

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Add Extra plugins if you want

plugins help to add more functionality check list of plugins.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

change package.json

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

enter below commands

 npm run build

Refer:https://webpack.js.org/guides/getting-started/

Conclusion

We just saw how information about webpack, how it works, why do we use it as an example of it.