Update Writing plugin and Plugin pattern page #2200

nveenjain · 2018-05-27T15:41:44Z

Fixes #2172, Updated writing plugins and plugin patterns page to include ES6 classes (as ES6 is supported by webpack completely) and updates related to new tapable library.

dhruvdutt · 2018-05-29T07:00:19Z

Related to #2202.

EugeneHlushko

Really good work here, but some stylistic and minor tweaks are requested, please pay attention to the rest of the changes where i didnt duplicate comments e.g. for ** -> __ and in javascript code blocks formatting (spaces, quotation, arrow funcs)

EugeneHlushko · 2018-08-21T08:22:47Z

src/content/contribute/writing-a-plugin.md


-`applyPlugins(name: string, args: any...)`
+It represents that the only hook supported is shouldEmit which is a hook of `SyncBailHook` type and the only parameter which will be passed to any plugin that taps into shouldEmit hook is compilation.


`compilation`

`shouldEmit`

EugeneHlushko · 2018-08-21T08:24:33Z

src/content/contribute/writing-a-plugin.md


 module.exports = FileListPlugin;
 ```

 ## Different Plugin Shapes

-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.
+A plugin can be classified into types based on the event hooks it taps into. Every event hook is pre-defined as synchronous/asynchronous/waterfall/parallel and hook is called internally using call/callAsync method. The list of hooks that are supported/can be tapped into are generally specified in this.hooks property.


supported or can be tapped...

I would recommend to use or and comma separation here for the / synchronous/asynchronous/waterfall/parallel

EugeneHlushko · 2018-08-21T08:25:49Z

src/content/contribute/plugin-patterns.md

-          // we've learned a lot about the source structure now...
+class MyPlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync("MyPlugin", (compilation, callback) => {


we use single quotes for ```javascript i wont mark all of the places where you changed it or added as ", please change everywhere

EugeneHlushko · 2018-08-21T08:27:17Z

src/content/contribute/plugin-patterns.md

+  apply(compiler) {
+    compiler.hooks.emit.tapAsync("MyPlugin", (compilation, callback) => {
+      // Explore each chunk (build output):
+      compilation.chunks.forEach(function(chunk) {


we use arrow functions in webpack/webpack codebase in such blocks, i would recommend changing these into arrow functions for style consistency

EugeneHlushko · 2018-08-21T08:45:34Z

src/content/contribute/plugin-patterns.md

-      return chunk.hash !== oldVersion;
-    }.bind(this));
-
+class MyPlugin{


the formatting is off, spaces are missing

EugeneHlushko · 2018-08-21T08:47:16Z

src/content/contribute/writing-a-plugin.md


- __waterfall__ Plugins applied using
+- **SyncHook**


we use __ for boldness, please fix this and next occurrences

EugeneHlushko · 2018-08-21T08:47:57Z

src/content/contribute/writing-a-plugin.md


-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 the order of its execution into account.
-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.
+  In these type of hooks, each of the plugin callbacks will be invoked one after the other with the specific `args`. If any value is returned except undefined by any plugin, then that value is returned by hook and no further plugin callback is invoked. Many useful events like `"optimizeChunks"`, `"optimizeChunkModules"` are SyncBailHooks.


You dont need to double quote the events, just `optimizeChunks`

EugeneHlushko · 2018-08-21T08:48:36Z

src/content/contribute/writing-a-plugin.md


-`applyPluginsAsync(name: string, args: any..., callback: (err?: Error) -> void)`
+  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 the order of its execution into account.


args -> arguments

EugeneHlushko · 2018-08-21T08:48:53Z

src/content/contribute/writing-a-plugin.md


-`applyPluginsAsync(name: string, args: any..., callback: (err?: Error) -> void)`
+  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 the order of its execution into account.
+  It must accept arguments from the previous plugin that was executed. The value for the first plugin is `init`. Hence atleast 1 param must be supplied for waterfall Hooks. This pattern is used in the Tapable instances which are related to the `webpack` templates like `ModuleTemplate`, `ChunkTemplate` etc.


Hooks -> hooks

`webpack` -> webpack

EugeneHlushko · 2018-08-21T08:49:39Z

src/content/contribute/writing-a-plugin.md


-`applyPluginsAsyncWaterfall(name: string, init: any, callback: (err: Error, result: any) -> void)`
+  The plugin handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. The handler functions are called in order of registration. `callback` is called after all the handlers are called.


args -> arguments

EugeneHlushko

lgtm

montogeek · 2018-09-18T02:38:05Z

Thanks!

* fix(contribute) Use consistent plugin name in code snippet (#2496) * fix(configuration) Fix small typo (#2511) * docs(manifest) Corrections and small update to concept manifest page (#2504) Small updates and corrections for manifest concepts page * docs(concepts) Update dependency graph concepts page (#2495) * docs(concepts) Update dependency graph concepts page * docs(concepts) Dependency graph minor tweak * docs(concepts) Use common formatting, provide more links, mention mod… (#2472) * docs(concepts) use common formatting, provide more links, mention mode in core of the concepts * docs(concepts) duplicate links on the list for better ux * docs(concepts) forgot to add EugeneHlushko to contributors * docs(configuration) Add externals examples (#2515) Update the external docs with an example on how to combine the different syntaxes. I felt it was not clear how to achieve this from the existing docs. * docs(plugins) Update Writing plugin and Plugin pattern page (#2200) * Update Writing plugin and Plugin pattern page * Fixed formatting issues * Fix markdown lint issues * Update plugin-patterns.md * Update plugin-patterns.md * docs(concepts) Using vendors as entry is not recommended (#2525) * Using vendors as entry is not recommended fixes webpack/webpack#6647 * add note about vendor entrypoints * fix(guides) Correct misspelling and punctuation errors (#2513) * Correct misspelling and punctuation errors * Update build-performance.md * docs(plugins): Add custom vendor chunks using RegEx example (#2518) * docs(config): Example 3 - custom vendor chunk using RegEx * docs(config): Example 3 SplitChunks Fenced blank added * docs(config): (typo) Example 3 - custom vendor chunk using RegEx * sakhisheikh docs(config): (reworded) Example 3 - custom vendor chunk using RegEx * docs(config): (Reword) Example 3 - custom vendor chunk using RegEx * docs(config): (Reword) Example 3 - custom vendor chunk using RegEx * chore(plugins) Remove space (#2527) * docs(config): Example 3 - custom vendor chunk using RegEx * squashed everything after c81e77e * docs(plugins) Add .mjs to the defaults (#2493) This should be updated once webpack/webpack#7947 is released. * chore(plugins) Minor SplitChunks Documentation Clean Up (#2252) * Minor Documentation Clean Up Originally, i was just trying to change defer => differ, but I ended up doing a bit more editing. * Lower the case * fix(api) Clarify module section (#2529) Change wording from "bind an extension" to "bind a file extension" in order to distinguish from a webpack extension. _describe your changes..._ - [ ] Read and sign the [CLA][1]. PRs that haven't signed it won't be accepted. - [ ] Make sure your PR complies with the [writer's guide][2]. - [ ] Review the diff carefully as sometimes this can reveal issues. - __Remove these instructions from your PR as they are for your eyes only.__ [1]: https://cla.js.foundation/webpack/webpack.js.org [2]: https://webpack.js.org/writers-guide/ * docs(plugins): Update links in htmlwebpackplugin (#2530) * docs(plugins) Fix reuseExistingChunk title nesting (#2526) * docs(plugins) scp reuseExistingChunk title nesting fix * docs(plugins) scp reuseExistingChunk title notation * docs(guides) Fix typo (#2537) * chore(guides) Import needs to be highlighted with '+' mark (#2536) import webpack needs to be highlighted since we are adding webpack.HashedModuleIdsPlugin() * docs(config) Optimization moduleIds option (#2543)

montogeek added Documentation Plugins labels May 28, 2018

dhruvdutt mentioned this pull request May 29, 2018

Update the “Writing a plugin” docs for the new plugin API #2202

Merged

nveenjain force-pushed the fix/writingPlugin branch from 223cc3d to 94cd9ba Compare May 29, 2018 19:06

Update Writing plugin and Plugin pattern page

6d1c758

nveenjain force-pushed the fix/writingPlugin branch from 94cd9ba to 6d1c758 Compare May 29, 2018 20:26

montogeek requested a review from EugeneHlushko August 6, 2018 11:32

EugeneHlushko requested changes Aug 21, 2018

View reviewed changes

Fixed formatting issues

7d33eee

EugeneHlushko approved these changes Sep 3, 2018

View reviewed changes

montogeek added 2 commits September 3, 2018 15:34

Fix markdown lint issues

3138c5c

Merge branch 'master' into fix/writingPlugin

497981c

dhruvdutt approved these changes Sep 4, 2018

View reviewed changes

montogeek added 3 commits September 18, 2018 03:34

Merge branch 'master' into fix/writingPlugin

609b6dd

Update plugin-patterns.md

50ffa2c

Update plugin-patterns.md

f301467

montogeek merged commit 19ead0e into webpack:master Sep 18, 2018

nveenjain deleted the fix/writingPlugin branch October 3, 2018 11:17


		`applyPlugins(name: string, args: any...)`
		It represents that the only hook supported is shouldEmit which is a hook of `SyncBailHook` type and the only parameter which will be passed to any plugin that taps into shouldEmit hook is compilation.


		`applyPluginsAsync(name: string, args: any..., callback: (err?: Error) -> void)`
		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 the order of its execution into account.


		`applyPluginsAsyncWaterfall(name: string, init: any, callback: (err: Error, result: any) -> void)`
		The plugin handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. The handler functions are called in order of registration. `callback` is called after all the handlers are called.

Uh oh!

Update Writing plugin and Plugin pattern page #2200

Update Writing plugin and Plugin pattern page #2200

Uh oh!

Conversation

nveenjain commented May 27, 2018

Uh oh!

dhruvdutt commented May 29, 2018

Uh oh!

EugeneHlushko left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EugeneHlushko left a comment

Choose a reason for hiding this comment

Uh oh!

montogeek commented Sep 18, 2018

Uh oh!

Uh oh!