The Webpack Guide For Beginners

Front-end development has shifted from a traditional to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. But the browser only knows HTML, CSS, and JavaScript. So, module bundlers play a vital role in modern workflows.

Understanding the tooling is a key part of any project, and it is important to understand the tooling of your project.

Webpack has gained popularity in the last few years because of its powerful configuration and scalability, but some developers have found its configuration process confusing and hard to adopt. This article gives you a basic understanding of webpack configuration and how modules work.

What is Webpack?

Webpack is a static module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

The motivations behind webpack are to gather all your dependencies, which includes not just code, but other assets as well, and generate a dependency graph. Bundlers are only prepared to handle JS files, so webpack needs to preprocess all the other files and assets before they get bundled.

What is a dependency graph in Webpack?

One file depends upon any file type such as (JavaScript, CSS /SCSS, & also non-code assets such as images, SVG's, web fonts, etc) in your application — webpack treats it as a dependency.

When webpack bundles your application, it starts with an entry point in your webpack.config.js file and recursively builds a dependency graph that includes every dependency that your app needs and bundles them into one or more files depending upon your need and it’s loaded by the browser.

Core Concepts

Entry

An entry property indicates the starting point of a module, it will be useful to webpack to start building an internal dependency graph.

By default, its value is ./src/index.js, but you can specify a different one (or multiple) entry points by setting an entry property in the webpack configuration file.

First, let start creating webpack.config.js in the root folder and assign a single entry point as ./app/index.js.

entry demo at webpack.config.js

Usage: entry: string | [string]

For adding multiple entries, you can assign an array of files in the entry property.

Output

An output property tells the webpack where to put the bundles it generates and how to name these files. By default, it takes ./dist/main.js as the main output file and ./dist folder for any static content.

You can configure this part of the process by specifying an output field in your configuration:

output demo at webpack.config.js

Loaders

As indicates the name of this property, it allows webpack to process any type of file and convert them into valid module’s are used by your application and added to your dependency graph. Because webpack only understands only javascript and JSON files.

It works before or at the beginning of the bundle generation at the individual file level.

Loaders can also transform files from a different language (like TypeScript) to JavaScript with appropriate loaders or load inline images as data URLs and also allow you to directly import CSS files in javascript modules.

At a high level, webpack has two properties that are “test” and “use”

1. A test property for indicating which file or files need to be processed.
2. A use property for telling to webpack which loaders utilized for converting the files into valid modules.

Before using loaders in your webpack.config.js, we need to install them as dependencies in your app.

npm install -D style-loader css-loader

loader demo at webpack.config.js

Here are the few popular loaders, we are using while creating our frontend app.

1. babel-loader -This package allows transpiling JavaScript files using babel and webpack.
2. ts-loader -Loads TypeScript 2.0+ like JavaScript
3. sass-loader -Loads and compiles a SASS/SCSS file
4. svg-url-loader -A webpack loader which loads SVG file as utf-8 encoded DataUrl string.

Plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management, and injection of environment variables.

It works at the end or after bundle generation at the bundle level, so it has more control over the bundle.

To use a plugin you need to install it as a dependency and use require() method to import it and add it to the plugin array at the webpack config file.

plugin demo at webpack.config.js

Here are the few popular plugins, we are using while creating our frontend app.

1. eslint-webpack-plugin -This plugin uses eslint to find and fix problems in your JavaScript code.
2. webpack-bundle-analyzer -Visualize the size of webpack output files with an interactive zoomable treemap.
3. clean-webpack-plugin -A webpack plugin to remove/clean your build folder(s).
4. TerserWebpackPlugin -This plugin uses terser to minify/minimize your JavaScript.
5. purgecss-webpack-plugin -webpack plugin to remove unused CSS.
6. uglifyjs-webpack-plugin -This plugin uses uglify-js to minify your JavaScript.

Mode

Mode property accepts three values i.e production, development, and none. you can enable webpack built-in optimization according to each environment.

mode demo in webpack.config.js

References

1. https://webpack.js.org/concepts/
2. https://www.youtube.com/watch?v=yiwSVeHYosQ

Thank you for reading! If you liked this, consider following me on Twitter, and sharing the article with your developer friends.

More content at plainenglish.io