Mastering Webpack: Core Concepts, Configurations, and Practical Examples

Webpack Learning Summary

1 Introduction

Packaging essentially merges many scattered files into an ordered single file to achieve front‑end optimization.

The history of packaging is omitted; interested readers can explore related resources.

Build ≠ packaging, and vice versa. Packaging is a part of the build process; builds can do more. However, packaging is always a core aspect of building.

1.1 Related Tools

There are many packaging tools; the author briefly introduces the ones they know:

1.1.1 Grunt

Grunt is actually a build tool that provides basic capabilities and has a strong, early community.

1.1.2 Gulp

Gulp is similar to Grunt, so no further discussion.

1.1.3 FIS

FIS offers a core specification and workflow for the entire packaging process and provides three core capabilities; it is worth learning.

1.1.4 Webpack

Webpack is currently the most popular and widely discussed tool.

For personal learning, compared with other tools, Webpack focuses solely on packaging, and this focus makes it powerful.

2 Packaging Principles

The packaging process is simple and intuitive, as shown in the diagram below:

Determine the entry file: every program has an entry point, and packaging is no exception.

Collect dependencies: analyzing dependencies is the key step; packaging follows the dependency order.

Define the output file(s): usually a single file, but multiple files (e.g., commons, async chunks) are possible.

Package: generate the final output.

3 Webpack

The basic usage of Webpack is documented elsewhere; the core of Webpack is dependency analysis , everything else is detail.

It supports various module specifications, plugins, etc.

Using Webpack mainly involves configuring it.

Below is a snapshot of the official Webpack documentation directory:

The extensive configuration options demonstrate Webpack's capabilities.

Most of the time, focusing on core configurations is sufficient.

3.1 entry

The entry option defines the entry file(s) and supports three formats:

string – a single entry file.

array – multiple entry files bundled together.

object – multiple chunks; the key is the chunk name, the value specifies its entry file.

String and array produce a single bundle; object can produce multiple bundles.

3.2 output

The output option configures the output file(s) and mainly handles:

File name and path.

File format.

Example:

<code>// js/a.js
require('./c.js');
var a = 1;

// js/b.js
require('./c.js');
var b = 1;

// js/c.js
var c = 1;

// webpack.config.js
module.exports = {
    entry: {
        a: './js/a.js',
        b: './js/b.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: "[name].js"
    }
};
</code>

Key points:

filename specifies the output file name (avoid including a path).

path specifies the output directory.

For library bundles, additional module wrapper settings are needed:

<code>module.exports = {
    entry: { a: './js/a.js' },
    output: {
        path: __dirname + '/dist',
        filename: "L.js",
        library: 'L',
        libraryTarget: 'umd'
    }
};
</code>

The resulting L.js file includes a standard module wrapper:

<code>(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["L"] = factory();
    else
        root["L"] = factory();
})(this, function() {
    return /******/ (function(modules) { // webpackBootstrap
        // ...
    });
});
</code>

3.3 resolve

The resolve option helps simplify dependency paths during analysis.

Without resolve.root, you would need to write relative paths like

require('./js/a')

.

<code>// main.js
require('a');
var main = 1;

// webpack.config.js
var path = require('path');
module.exports = {
    entry: { b: './js/b.js', c: './main.js' },
    output: { path: __dirname + '/dist', filename: "[name].js" },
    resolve: { root: [ path.resolve('./js/') ] }
};
</code>

3.4 externals

Externals configure external dependencies so that certain third‑party libraries are not bundled.

<code>module.exports = {
    entry: './main.js',
    output: { filename: 'L.js', library: 'L', libraryTarget: 'umd' },
    externals: {
        'jquery': { root: 'jquery', amd: 'jquery', commonjs2: 'jquery', commonjs: 'jquery' }
    }
};
</code>

The resulting bundle expects jQuery to be provided externally:

<code>(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("jquery"));
    else if(typeof define === 'function' && define.amd)
        define(["jquery"], factory);
    else if(typeof exports === 'object')
        exports["Q"] = factory(require("jquery"));
    else
        root["Q"] = factory(root["jQuery"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_4__) {
    return /******/ (function(modules) { // webpackBootstrap
        // ...
    });
});
</code>

3.5 watch

The watch feature is essential for a build tool, enabling automatic recompilation on file changes.

3.6 plugins

Plugins provide extensibility for a mature framework; interested readers can explore them further.

4 Summary

Webpack is a dedicated packaging tool that is easy to use yet powerful.

It can serve as the core packaging plugin for build frameworks such as Grunt and Gulp.

This article covered only a subset of Webpack's core features, which already satisfy many common needs.