What is Webpack?

Imagine you have a big box of LEGO pieces, and you want to build a cool spaceship. But the LEGO pieces are all over the place—some are in your room, some are in the living room, and some are even under the couch. To build your spaceship, you need to gather all the pieces and put them together in the right way.

Webpack is like a super-smart robot that helps you do this for websites. When you’re making a website, you have lots of small pieces of code (like HTML, CSS, and JavaScript files) that need to work together. Webpack goes around, finds all those pieces, and puts them into one or a few neat bundles, so your website can run smoothly.

So, just like the robot helps you organize your LEGO pieces to build a spaceship, Webpack helps organize your code to build a website

Now, let's dive into what Webpack is more specifically. Webpack is the most popular JavaScript module bundler.

Like the image above, it allows you to bundle not only JavaScript files (.js) but also other modules like CSS and image files into a single file. Importing hundreds of external files means that as the application grows in size, the user experience satisfaction tends to decrease. This is because all external files must be loaded over the network, which results in increased network load, greater computing power consumption, and higher costs. Webpack bundles all the files into single file, which means it makes applications more efficient and improves loading speed.

When Webpack processes an application, it internally creates a dependency graph that maps all the modules required by the project and generates one or more bundles.

In Webpack, a Dependency Graph is a visual representation of the relationships between the source code files in a project. It shows how files depend on each other—meaning which files import or require other files. Based on this graph, Webpack efficiently performs bundling to create optimized and organized output files.

How To Install

1. Install Node.js and npm

Webpack requires Node.js and npm (Node Package Manager).

2. Install Webpack

Install Webpack and its CLI (Command Line Interface) locally in your project:

npm install webpack webpack-cli --save-dev

3. Set Up Webpack Configuration

Create a webpack.config.js file in your project root to configure Webpack. Here’s a basic example:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of your application
  output: {
    filename: 'bundle.js', // Output file name
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // Set mode to 'development' or 'production'
};

4. Create Your Project Files

Create a src folder and add an index.js file (or any other entry file you specified in the config).

5. Run Webpack

To bundle your project, run the following command in your terminal:

npx webpack

This will generate a dist folder containing the bundled file (bundle.js in this case).

6. View the Output

Open the generated bundle.js file in the dist folder to see the bundled code. You can also link this file in an HTML file to test it in a browser.

Webpack Configuration

Webpack configures the project's setup through the webpack.config.js file. The configuration options typically include Entry, Output, Loader, Plugin, and Mode.

1. Entry

The entry point is where the source file's entry path is defined, acting as the starting point for Webpack to build its internal dependency graph. It specifies the module that Webpack should use as the starting point for bundling. By default, a single entry point is defined, but multiple entry points can also be configured if needed.

module.exports = {
  entry: './src/index.js',
};

2. Output

This property specifies the path and filename where the bundled files will be output (generated) after Webpack processes them.

module.exports = {
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
};

3. Loader

By default, Webpack can only process JavaScript and JSON files. However, with loaders, Webpack can transform other types of files (like CSS, images, etc.) into modules. Loaders are mainly used to change the file format or perform specific tasks during the build process.

To use a loader in Webpack, you need to install the necessary package(s) and define them in the module.rules array within the configuration. Each rule typically includes two properties: test and use.

• test: This property is used to identify which files need to be processed by the loader. It's written using a regular expression (RegExp) to match files that should be transformed.
  
  
• use: This property specifies the loader(s) that will perform the transformation on the identified files.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Loaders are applied in reverse order, meaning they work from right to left (or from bottom to top if defined in an array). In the example above, css-loader will be started first.

4. Plugin

A plugin in Webpack is a powerful tool used to extend Webpack's capabilities beyond what loaders can do. While loaders transform files (e.g., converting SCSS to CSS or bundling JavaScript modules), plugins perform a wider range of tasks, such as:

• Optimizing assets (e.g., minifying JavaScript, CSS, and images)
• Managing environment variables
• Generating HTML files dynamically
• Cleaning output directories before building
• Enabling hot module replacement

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Use this HTML template
      filename: 'index.html', // Output file name
    }),
  ],
};

5. Mode

The mode option in Webpack defines the build environment and automatically sets optimizations for that environment. It can be set to one of the following values:

• development – Optimized for faster builds and better debugging (e.g., source maps, unminified output).
• production – Optimized for performance (e.g., minification, tree shaking, and other optimizations).
• none – No default optimizations are applied; you must configure everything manually.

// webpack.config.js

module.exports = {
  mode: 'development', // or 'production' or 'none'
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
};

The mode is usually set in CI/CD automatically, using environment variables.

Wrapping Up

In this way, I have summarized the key concepts of Webpack. There are many other options (e.g., Vite, Rollup, Parcel) that can be fine-tuned, so it's a good idea to look for and apply the ones that are necessary for your project as you go.