Everything you need to know about Webpack

It’s bit difficult to use webpack for the first time. Btw webapack has very good documentation. However, webpack is worth learning and can save considerable time and effort in the long run. In this tutorial, I’ll introduce all the core concepts to help you get started.

What’s Webpack?

Webpack main concepts

  • Entry — The entry point is the module, which webpack uses to start building its internal dependency graph.
  • Output — The output property instructs webpack where to emit the bundle(s) and what name to use for that file(s).
  • 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.
  • 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 — Usually, when we develop our application we work with two types of source code — one for the development build and one for the production build.

How webpack works

To do all this, webpack relies on configuration. Although webpack 4 comes with reasonable defaults, for any non-trivial project you’ll need to provide a special configuration file webpack.config.js, which describes how the files and assets should be transformed and what kind of output should be generated. This file can quickly become quite 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 project’s modules into a small number of bundles — usually, just one — to be loaded by the browser.

Chamod Shehanka a FullStack Developer at Platformer and Writer at Noteworthy, Platformer and The Java Report