深入浅出webpack编译体系

[slashhuang]

7 important tapable instances

1. compiler: exosed via node api + central dispatch start/stop

  const webpack = require('webpack');
  const compiler = webpack(options);

2. compilation: created by the compiler, contain dependency graph algorithm.

3. resolver make sure file/folder/path exist

4. module factory takes successfully resolved requests collects source for that file, creates a module object

5. parser takes a module object, turns into AST and parse. find all dependency statements(require/import etc).

6. template dataBinding for your modules, creates the code in your bundles.

   1. main template
   2. module template
   3. dependency template

核心思想:

1. every instance can be plugged into.

compiler ==options==> compilation -->

--> resolver(make sure entry point exist) == moduleFactory --> modules -->

== Loaders or Rules --> parser |--------------------->|

==> AST statements(requie/import etc)

==> attach to Modules(dependency graph)

==> recursively flow for dependency

inspired by https://www.youtube.com/watch?v=NHI_PhoykVU @reactRally