Skip to main content

Webpack

What is Webpack?

Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules.This Collective is run by and for the benefit of the independent contributors to the webpack open source software project. It helps make our files compress, and it can create chunks to our code to make better performance for our projects, actually it uses loaders to create all the magic and to expand the use of Webpack.webpack packs many modules into a few bundled assets. It can bundle ES Modules, CommonJS, and AMD modules, and create a single bundle or multiple chunks through code-splitting that are asynchronously loaded at runtime. It supports all browsers that are ES5-compliant, has a rich plugin interface that makes it very flexible, and enables the use of loaders to preprocess files.

  • Bundles ES Modules, CommonJS, and AMD modules (even combined).
  • Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
  • Dependencies are resolved during compilation, reducing the runtime size.
  • Loaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64 etc
  • Highly modular plugin system to do whatever else your application requires.

Features of Webpack:

  • Bundles ES Modules, AMD modules, CommonJS, and even combinations of these
  • Able to make one bundle or several chunks which are then asynchronously loaded at runtime, reducing initial loading time
  • Resolves dependencies at compilation, reducing the runtime size
  • Preprocesses files during compilation through Loaders (from TypeScript to JavaScript, Handlebars strings to compiled functions, etc.
  • Has a plugin system that is highly modular, able to do whatever else your application needs
  • Wide browser support (for browsers that are ES5-compliant)
  • Incredibly fast - through the use of async I/O and multiple caching levels
  • Able to do several optimizations to minimize the output size of your JavaScript

Webpack Main Concept

  • Entry :the entry point is the module that webpack uses to start building its internal dependency graph. From there, it determines which other modules and libraries that entry point depends on (directly and indirectly) and includes them in the graph until no dependency is left.
  • Output: the output property instructs webpack where to emit the bundle(s) and what name to use for the file(s). The default value for this property is ./dist/main.js for the main bundle and ./dist.
  • Loaders: by default, webpack only understands JavaScript and JSON files. To process other types of files and convert them into valid modules, webpack uses loaders. Loaders transform the source code of non-JavaScript modules, allowing us to preprocess those files before they’re added to the dependency graph.
  • Plugins: plugins are used for any other task that loaders can’t do. They provide us with a wide range of solutions about asset management, bundle minimization and optimization, and so on.
  • Mode: typically, when we develop our application we work with two types of source code — one for the development build and one for the production build. Webpack allows us to set which one we want to be produced by changing the mode parameter to development, production or none.

How Webpack Works?

In this section, we’ll examine how webpack works. Even a simple project contains HTML, CSS and JavaScript files. Also, it can contains assets such as fonts, images, and so on. So, a typical webpack workflow would include setting up an index.html file with the appropriate CSS and JS links, and the necessary assets. Also, if you have many CSS and JS modules which depend on each other, they need to be optimized and properly combined in one unit ready for production.

To do all this, webpack relies on configuration. Starting from version 4 and above, webpack provides reasonable defaults out of the box, so creating a configuration file is not required. However, for any non-trivial project you’ll need to provide a special webpack.config.jsfile, which describes how the files and assets should be transformed and what kind of output should be generated. This file can quickly become monolithic, which makes it hard to understand how webpack does its job unless you know the main concepts behind its working.

Based on the provided configuration, webpack starts from the entry points and resolves each module it encounters while constructing the dependency graph. If a module contains dependencies, the process is performed recursively against each dependency until the traversal has completed. Then webpack bundles all the project’s modules into a small number of bundles — usually, just one — to be loaded by the browser.

How Webpack is optimmization?

Webpack can do many optimizations to reduce the output size of your JavaScript by deduplicating frequently used modules, minifying, and giving you full control of what is loaded initially and what is loaded at runtime through code splitting. It can also make your code chunks cache friendly by using hashes.Webpack allows you to split your codebase into multiple chunks. Chunks are loaded asynchronously at runtime. This reduces the initial loading time.