Skip to content

Commit eff064d

Browse files
author
Pavithra K
committed
Adds code explanation
1 parent 052b674 commit eff064d

File tree

1 file changed

+17
-6
lines changed

1 file changed

+17
-6
lines changed

content/pluginsapi/compiler.md

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ The `Compiler` module of webpack is the main engine that creates a compilation i
77

88
It is exported by `webpack` api under `webpack.Compiler`.
99

10-
The compiler is used by webpack by instantiating it and then calling the `run` method.
10+
The compiler is used by webpack by instantiating it and then calling the `run` method. Below is a trivial example of how one might use the `Compiler`. In fact, this is very close to how webpack itself uses it.
1111

1212
[__compiler-examples__](https://github.com/pksjce/webpack-internal-examples/blob/master/compiler-example.js)
1313

@@ -37,27 +37,38 @@ new LogPlugin().apply(compiler);
3737
/* Add other supporting plugins */
3838

3939
// Callback to be executed after run is complete
40-
const callback = () => {
41-
console.log('Compiler has finished execution.')
40+
const callback = (err, stats) => {
41+
console.log('Compiler has finished execution.');
42+
/* Do something to show the stats */
4243
};
4344

4445
// call run on the compiler along with the callback
4546
compiler.run(callback);
4647
```
4748

48-
?>TODO: Add more explanation of how above code works explaining compiler parts and hooks.
49-
Also tell Tapable is mixed in with Compiler.Differentiate between Compiler's and Tapable's methods
49+
The `Compiler` is what we call a `Tapable` instance. By this, we mean that it mixes in `Tapable` class to imbibe functionality to register and call plugins on itself.
50+
All user facing plugins are first registered on the `Compiler`.
51+
The working of a Compiler can be condensed into the following highlights
52+
- Usually there is one master instance of Compiler. Child instances for delegating are possible.
53+
- A lot of the complexity in creating a compiler goes into populating all the relevant options for it.
54+
- `webpack` has [`WebpackOptionsDefaulter`](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js) and [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js) specifically designed to provide the `Compiler` with all the intial data it requires.
55+
- The `Compiler` is just a skeleton which performs bare minimum functionality to keep a lifecycle running. It delegates all the loading/bundling/writing work to various plugins.
56+
- `new LogPlugin(args).apply(compiler)` registers the plugin to any particular hook event in the `Compiler`'s lifecycle.
57+
- The `Compiler` exposes a `run` method which kickstarts all compilation work for `webpack`. When that is done, it should call the passed in `callback` function. All the tail end work of logging stats and errors are done in this callback function.
5058

5159
## Watching
5260

53-
?>TODO: Add that compiler duplicates all above functionality and adds watch functionality to it. Highlight differences.
61+
However, the `Compiler` supports two flavors of execution. One on watch mode and one on a normal single run.
62+
While it essentially performs the same functionality while watching, there are some subtle changes to the lifecycle events. This allows `webpack` to have Watch specific plugins.
5463

5564
## MultiCompiler
5665

5766
?> Can create child compilers?
5867

5968
## Event Hooks
6069

70+
This a reference guide to all the event hooks exposed by the `Compiler`.
71+
6172
?>TODO: For each hook follow template of
6273
1. event name
6374
2. reason for event.

0 commit comments

Comments
 (0)