Add plugin example/boilerplate and some useful notes

[alexander-akait]

Feature to document

Section - https://webpack.js.org/concepts/plugins

Reasons:

• No information for plugin developers.
• Avoid invalid usage some hooks.
• Other useful stuff.

Main problem why this issue was created (and first note about invalid usage):

A lot of plugins use emit hook for emitting assets, but it is invalid. Why:

1. emit hook is last so you need setup right order (example imagemin-webpack-plugin and copy-webpack-plugin use emit hook so if you put imagemin-webpack-plugin before copy-webpack-plugin assets from copy-webpack-plugin can't be optimized). There are a lot of other example (i can provide if we need this).
2. TerserWebpackPlugin (and other minimizers) uses optimizeChunkAssets hook, so all assets written in emit event is not compressed too.
3. In the plans for webpack@5 use freeze on assets after compilation to decrease memory usage. Also we maybe introduce new hooks for plugin like manifest-webpack-plugin.
4. The additionalAssets hook was specially made for adding assets.

Right solution is using additionalAssets hook (https://github.com/webpack/webpack/blob/master/lib/Compilation.js#L352). Some plugins in webpack-contrib and webpack repo will be rewritten on additionalAssets.

Feel free to feedback.

Author(s)

no matter

Additional information

No

[anikethsaha]

👍 for this I think it's important to document the lifecycle as well like the order of the hooks calling.