Webpack Build Process, Tapable Plugin System, and a Simple Bundler Implementation

This article introduces the Webpack bundling workflow, explains the Tapable plugin system that powers Webpack’s hooks, and demonstrates a minimal hand‑written bundler to illustrate the core concepts.

Webpack starts from an entry file, parses its source into an AST, recursively collects dependencies, and finally emits bundled code. The plugin mechanism is built on Tapable, which provides a publish‑subscribe model for extending the compiler.

Tapable defines several hook families: basic hooks (SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook) and asynchronous hooks (AsyncParallelHook, AsyncSeriesHook, AsyncSeriesWaterfallHook, etc.). Hook names encode execution style (e.g., Waterfall passes the previous result to the next callback) and sync/async nature.

In addition to hooks, Tapable supports interceptors (register, call, tap, loop) that allow code to run when hooks are registered or invoked, and utilities such as HookMap and MultiHook for managing collections of hooks.

The core of Tapable works by having tap insert a callback into an internal array, while call (or its async variants) triggers a compiled function generated by a HookCodeFactory. The compiled function is built from the hook’s type and arguments, producing the appropriate sync or async behavior.

During Webpack’s initialization phase, user options are normalized, a Compiler instance is created, plugins are applied, and compiler.run starts the compilation. The Compilation object holds a set of hooks (e.g., initialize , shouldEmit ) that are invoked throughout the build lifecycle.

The build phase begins with the make hook, where the entry module is added. Each module is parsed (using acorn in Webpack) to produce an AST, dependencies are extracted, loaders transform the source, and the parser records further imports. This process recurses until the full dependency graph is built.

In the generation phase, compilation.seal creates a ChunkGraph , optimizes modules and chunks, and finally creates assets for both modules and chunks. The assets are written to the output file system via emitAsset and outputFileSystem.writeFile .

To make the concepts concrete, the article provides a tiny bundler implementation. parser.js exports three functions:

const fs = require('fs');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const { transformFromAst } = require('babel-core');

module.exports = {
  getAST: path => {
    const source = fs.readFileSync(path, 'utf-8');
    return parser.parse(source, { sourceType: 'module' });
  },
  getDependencies: ast => {
    const deps = [];
    traverse(ast, { ImportDeclaration: ({ node }) => deps.push(node.source.value) });
    return deps;
  },
  transform: ast => {
    const { code } = transformFromAst(ast, null, { presets: ['env'] });
    return code;
  }
};

compiler.js defines a Compiler class that builds modules, walks the dependency graph, and emits a bundle using a self‑executing function:

class Compiler {
  constructor(options) {
    const { entry, output } = options;
    this.entry = entry;
    this.output = output;
    this.modules = [];
  }
  run() {
    const entryModule = this.buildModule(this.entry, true);
    this.modules.push(entryModule);
    this.walk(entryModule);
    this.emitFiles();
  }
  walk(module) {
    const moduleNames = this.modules.map(m => m.filename);
    module.dependencies.forEach(dep => {
      if (!moduleNames.includes(dep)) {
        const newMod = this.buildModule(dep);
        this.modules.push(newMod);
        this.walk(newMod);
      }
    });
  }
  buildModule(filename, isEntry) {
    let ast;
    if (isEntry) {
      ast = getAST(filename);
    } else {
      const absolute = path.resolve(process.cwd(), './webpack/demo', filename);
      ast = getAST(absolute);
    }
    return {
      filename,
      dependencies: getDependencies(ast),
      transformCode: transform(ast)
    };
  }
  emitFiles() {
    const outputPath = path.join(this.output.path, this.output.filename);
    let modules = '';
    this.modules.forEach(m => {
      modules += `"${m.filename}": function(require, module, exports) {${m.transformCode}},`;
    });
    const bundle = `
      (function(modules) {
        function require(name) {
          const fn = modules[name];
          const module = { exports: {} };
          fn(require, module, module.exports);
          return module.exports;
        }
        require('${this.entry}');
      })({${modules}})
    `;
    fs.writeFileSync(outputPath, bundle, 'utf-8');
  }
}
module.exports = Compiler;

Running the bundler with a configuration that points to index.js produces dist/bundle.js , which can be loaded in an HTML page to verify the output.

By dissecting Tapable’s hook architecture and walking through Webpack’s three phases (initialization, compilation, generation), the article shows how a full‑featured bundler works under the hood and why understanding these mechanisms helps developers use and extend tools like Webpack and Rollup more effectively.