Webpack source code myself for a few weeks, but also do share within the team, and strive to update some high quality articles, looking forward to their own continuous improvement.

1. What webPack does

Webpack, as a very important packaging tool for the front end, its main role can be summarized in one sentence:

  • Package code (CSS, TS, Vue,sass) into multiple bundle.js that the browser can run based on dependencies

For this purpose, WebPack must do four things:

  • Acorn based collection module dependencies;
  • Convert all files based on the Loader into js that the browser can run
  • A lot to do in packaging the entire lifecycle (based on plugin implementation)
  • Finally, bundle (tree-shaking, etc.) into multiple bundle.js

Tapable and Acorn

Paste a piece of source code, you can see that the entire compilation process appears several times similar writing, and there is no corresponding implementation code between the two hooks, so the specific hook is doing what?

This is where the Tapable library comes in

2.1 Tapable is a library similar to EventEmitter of NodeJS, which mainly controls the publishing and subscription of hook functions and the plug-in system of Webpack. The essence of Webpack is to run a series of plug-ins.

  • There are four hook types:

1. Basic hooks

2, Waterfall: it will call each tap incoming function and give the return value of each function to the next function at the same time

3, Bail: allows early exit. When a tap function returns any value, the hook will stop the execution of other functions.

Loop: The event that will be executed before if a function returns a value

The most used hooks in Webpack are syncHook and AsyncSeriesHook

  • There are three ** registration methods for hooks (** contains names and corresponding callbacks) :

    Tap: Registers synchronization hooks

    2. TapAsync: Register asynchronous hooks with callback callback (most used)

    3. TapPromise: Register asynchronous hooks with promise callbacks

  • There are three corresponding invocation methods:

    1. Call: calls the registered sync hook;

    CallAsync: Calls a registered asynchronous hook with a callback

    Promise: Invoke the registered asynchronous hook with the promise callback

Look at an example

  • BeforeCompile hook declaration in Webpack, plugin registration and invocation

  • Implement the entire functionality of WebPack based on plug-ins declared in various WebPack lifecycle hooks

  • Look at each statement cycle webpack hooks: webpack.js.org/api/compile…

  • One small addition: the difference between the observer and publish/subscribe modes:

    The observer pattern is loosely coupled, with only the observer and the observed (for example, a value changes, a function is called);

    There is no coupling in the publish-subscribe model, there are publishers, subscribers and brokers

2.2 for acorn

  • Acorn is a library that implements parsing of JS, converting it into AST, and collecting dependencies after conversion

3. Webpack runs in all stages

  • First look at the difference between Compiler and Compilation

The Compiler object: It contains all the configuration information for the Webpack environment, including options, loaders, and plugins. This object is instantiated when Webpack starts. It is globally unique and can be easily interpreted as a Webpack instance.

Compilation objects: contain current module resources, compile-generated resources, changing files, and so on. When Webpack is running in development mode, a new Compilation is created each time a file change is detected. The Compilation object also provides many event callbacks for plug-ins to extend. Compiler objects can also be read from the Compilation.

The difference between Compiler and Compilation is that Compiler represents the entire Webpack lifecycle from startup to shutdown, while Compilation simply represents a new Compilation.

  • I found a web map and combed through the processes

  • In the dependency collection, loader code processing, are implemented in the make stage

  • A few key points:

1. Webpack runs by calling Compiler.run

2. Webpack is built based on the publish and subscribe mode implemented by Tapable (everything is plug-in)

3. Ast is based on acRON library

4. Loader processing and dependency collection are implemented in make phase

5, the whole stage will go through: environment, afterEnvironment, beforeRun, run, beforeCompile,Make, afterCompile and other stages

Above is the webpack source analysis, for the general process to do a comb, but the more detailed process or need to see the source of the plug-in