Webpack is a famous module builder that we extensively use during our Web Development Journey. It is used for those applications that use Javascript. Before moving forward, we should note that Webpack only understands Javascript and JSON. So it converts other frontend files like HTML and CSS into modules with the help of a loader and thus provides a complete frontend solution to us. It internally makes a dependency graph while processing any application.
Features of Webpack: There are many features of webpack as follows:
- Entry: We all know webpack makes a dependency graph and the starting of this graph is known as the entry or entry point. From the starting point of the dependency graph, it will follow all the dependencies to know what it has to bundle.
- Output: Output tells webpack where to put the bundles that it had made and what will be its format.
- Loaders: Loaders convert different types of files like images and CSS into a module before adding them to the dependency graph.
- Plugins: Plugins provide functionality. It can provide much functionality like printing something on running the webpack, minifying, optimization of bundles, etc.
Installing Webpack: If you want to use web pack then first you need to install that. So for installing the webpack using the node package manager use this command in the terminal.
npm install --save-dev webpack
Advantages of Web Pack:
- It speeds the development journey: If we are using webpack then your page does not need to reload fully on having a small change in javascript. This same benefit can be accessed for CSS if we will use loaders. It also reduced the load time of the website during debugging and because of this, our time can be saved.
- It removed the problem of overwriting the global variables: We all know that webpack provides a module system that is based on ECMAScript(ES6). So every file that you will create here will become a module. Hence every variable that you will create in this file will be in the local scope. So the problem of overwriting of global variables that we were facing will be solved.
- It provides splitting of code: Since it supports a module system that’s why files will be treated as modules. Since the file will be treated as a module that means we can use one file’s features into another. So despite having different files, we can access the same benefit. So it actually helps us in splitting our code into different modules.
- It provides Minification: Minification means minimizing the code without changing its functionality. It removes all the whitespace, line breaks that are consuming spaces. It also removes unnecessary code and changes the long variable names. So doing this reduces file size and minimizes the code.
- It supports feature flagging: Feature flagging is a software engineering approach by which we send code to different environments during feature testing. So webpack not only helps in development, it helps in testing as well.
Application of Webpack:
- It helps to use different javascript files without having tension that will load first.
- It makes code shorter.
- It helps in converting many files other than javascript into modules.
- It compiles different javascript module.
