You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/concepts/plugins.md
-1Lines changed: 0 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,6 @@ They also serve the purpose of doing **anything else** that a [loader](/concepts
14
14
15
15
A webpack **plugin** is a JavaScript object that has an `apply` property. This `apply` property is called by the webpack compiler, giving access to the **entire** compilation lifecycle.
Copy file name to clipboardExpand all lines: content/pluginsapi/compiler.md
+92-26Lines changed: 92 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,50 +3,116 @@ title: Compiler
3
3
sort: 2
4
4
---
5
5
6
-
## Compiler
6
+
The `Compiler` module of webpack is the main engine that creates a compilation instance with all the options passed through webpack CLI or `webpack` api or webpack comfiguration file.
7
7
8
-
## Watching
9
-
10
-
## MultiCompiler
11
-
12
-
## Event Hooks
8
+
It is exported by `webpack` api under `webpack.Compiler`.
13
9
14
-
`environment()`
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.
// call run on the compiler along with the callback
46
+
compiler.run(callback);
47
+
```
33
48
34
-
`after-resolvers(compiler: Compiler)`
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
+
Most 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 compilers can be created for delegating specific tasks.
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 ultimately just a function 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.
35
58
36
-
`should-emit(compilation: Compilation)`
59
+
## Watching
37
60
38
-
`emit(compilation: Compilation, callback)`
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 additions to the lifecycle events. This allows `webpack` to have Watch specific plugins.
39
63
40
-
`after-emit(compilation: Compilation, callback)`
64
+
## MultiCompiler
41
65
42
-
`done(stats: Stats)`
66
+
This module, MultiCompiler, allows webpack to run multiple configurations in separate compiler.
67
+
If the `options` parameter in the webpack's NodeJS api is an array of options, webpack applies separate compilers and calls the `callback` method at the end of each compiler execution.
43
68
44
-
`additional-pass(callback)`
69
+
```javascript
70
+
var webpack =require('webpack');
45
71
46
-
`failed(err: Error)`
72
+
var config1 = {
73
+
entry:'./index1.js',
74
+
output: {filename:'bundle1.js'}
75
+
}
76
+
var config2 = {
77
+
entry:'./index2.js',
78
+
output: {filename:'bundle2.js'}
79
+
}
47
80
48
-
`invalid(fileName: string, changeTime)`
81
+
webpack([config1, config2], (err, stats) => {
82
+
process.stdout.write(stats.toString() +"\n");
83
+
})
84
+
```
49
85
50
-
`entry-option(context, entry)`
86
+
## Event Hooks
51
87
52
-
## Examples
88
+
This a reference guide to all the event hooks exposed by the `Compiler`.
Copy file name to clipboardExpand all lines: content/pluginsapi/index.md
+81-4Lines changed: 81 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,12 +3,89 @@ title: Plugins API
3
3
sort: 1
4
4
---
5
5
6
+
webpack provides flexible and powerful customization api in the form of plugins. Using plugins, we can plug functionality into webpack. Additionally, webpack provides lifecycle hooks into which plugins can be registered. At each of these lifecycle points, webpack will run all of the registered plugins and provide them with the current state of the webpack compilation.
7
+
6
8
## Tapable & Tapable instances
7
-
**Tapable Instances** are classes in the webpack source code which have been extended or mixed in from class `Tapable`.
9
+
10
+
The plugin architecture is mainly possible for webpack due to an internal library named `Tapable`.
11
+
**Tapable Instances** are classes in the webpack source code which have been extended or mixed in from class `Tapable`.
12
+
13
+
For plugin authors, it is important to know which are the `Tapable` instances in the webpack source code. These instances provide a variety of event hooks into which custom plugins can be attached.
14
+
Hence, throughout this section are a list of all of the webpack `Tapable` instances (and their event hooks), which plugin authors can utilize.
15
+
8
16
For more information on `Tapable` visit the [tapable repository](https://github.com/webpack/tapable) or visit the [complete overview](./tapable)
9
17
10
-
Throughout this section are a list of all of the webpack Tapable instances (and their event hooks), which plugin authors can utilize.
18
+
## Creating a Plugin
19
+
20
+
A plugin for `webpack` consists of
21
+
22
+
- A named JavaScript function.
23
+
- Defines `apply` method in it's prototype.
24
+
- Specifies webpack's event hook to attach itself.
25
+
- Manipulates webpack internal instance specific data.
26
+
- Invokes webpack provided callback after functionality is complete.
// Invokes webpack provided callback after functionality is complete.
41
+
callback();
42
+
});
43
+
};
44
+
```
45
+
46
+
### Different Plugin Shapes
47
+
48
+
A plugin can be classified into types based on the event it is registered to. Every event hook decides how it is going to apply the plugins in its registry.
49
+
50
+
-__synchronous__ The Tapable instance applies plugins using
Here each of the plugins are called one after the other with the args from the return value of the previous plugin. The plugin must take into consider the order of its execution.
64
+
It must accept arguments from the previous plugin that was executed. The value for the first plugin is `init`. This pattern is used in the Tapable instances which are related to the `webpack` templates like `ModuleTemplate`, `ChunkTemplate` etc.
65
+
66
+
-__asynchronous__ When all the plugins are applied asynchronously using
The plugin handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. The hander functions are called in order of registration.`callback` is called after all the handlers are called.
71
+
This is also a commonly used pattern for events like `"emit"`, `"run"`.
72
+
73
+
-__async waterfall__ The plugins will be applied asynchronously in the waterfall manner.
The plugin handler functions are called with the current value and a callback function with the signature `(err: Error, nextValue: any) -> void.` When called `nextValue` is the current value for the next handler. The current value for the first handler is `init`. After all handlers are applied, callback is called with the last value. If any handler passes a value for `err`, the callback is called with this error and no more handlers are called.
78
+
This plugin pattern is expected for events like `"before-resolve"` and `"after-resolve"`.
79
+
80
+
-__async series__ It is the same as asynchronous but if any of the plugins registered fails, then no more plugins are called.
Copy file name to clipboardExpand all lines: content/pluginsapi/tapable.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,10 +16,10 @@ However, in addition to this, `Tapable` allows you to have access to the "emitte
16
16
*`plugin(name:string, handler:function)` - This allows a custom plugin to register into a **Tapable instance**'s event.
17
17
This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
18
18
19
-
*`apply(...pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be subclass of [AbstractPlugin](https://github.com/webpack/webpack/blob/master/lib/AbstractPlugin.js), or a class (or object, rare case) has an `apply` method, or just a function with some registration code inside.
19
+
*`apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be subclass of [AbstractPlugin](https://github.com/webpack/webpack/blob/master/lib/AbstractPlugin.js), or a class (or object, rare case) has an `apply` method, or just a function with some registration code inside.
20
20
This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the **Tapable instance**'s registry.
21
21
22
-
*`applyPlugins*(name:string, ...)` - The **Tapable instance** can apply all the plugins under a particular hash using these functions.
22
+
*`applyPlugins*(name:string, …)` - The **Tapable instance** can apply all the plugins under a particular hash using these functions.
23
23
These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
24
24
25
25
*`mixin(pt: Object)` - a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
0 commit comments