Create custom plugins from your config file and avoid loosing time finding or maintaining a simple plugin.
Intercept any plugin and customize it to match your preferences.
Group your hooks to create a new plugin and modify it when you want.
Via npm:
npm i hook-webpack-plugin
Via yarn:
yarn add hook-webpack-plugin --dev
Add something like the following to your config file, in the plugin section:
// webpack.config.js
const HookWebpackPlugin = require('hook-webpack-plugin');
// ...
plugins: [
// ...
new HookWebpackPlugin(hookName, hookFn, options)
// ...
]
// ...
Then, replace the following values:
- hookName: string
- The name of a compiler/compilation hook. Something like "emit", "done", ...
- hookFn: function
- The listener for the hook.
- options: objectopt
-
Property Default Description sync false [async when possible] If a truthy value is given use `tap`, otherwise use `tapAsync`. pluginName HookWebpackPlugin Value to use in tap/tapAsync methods.
// webpack.config.js
plugins: [
new HookWebpackPlugin(hookName, compilerHook (...args) {
// Do something awesome...
})
]
Name your plugin and group multiple hooks together, internally.
// webpack.config.js
plugins: [
new HookWebpackPlugin(hookName, compilerHook, {pluginName: 'MyAwesomePlugin'}),
new HookWebpackPlugin(anotherHookName, anotherCompilerHook, {pluginName: 'MyAwesomePlugin'})
]
Set the pluginName
option to the internal name of the plugin you want to intercept.
// webpack.config.js
plugins: [
new ThirdPartyPlugin(options),
new HookWebpackPlugin(hookName, () => {
// Your code...
}, {'pluginName': 'ThirdPartyPlugin'})
]
Check the docs for more details.
hook-webpack-plugin is MIT licensed.