深入浅出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