Menu
I looked it up at the docs here and here, searched StackOverflow and GitHub discussions and still can't find this information. Is there any resource or does anyone knows if the order of the plugins matter in Webpack? And how does the ordering work?
211
Yes, the order matters. Plugins can use several hooks, as explained in Rollup's docs. Some hooks are run in parallel but others, like the transform hook notably, are run in sequence, and the hooks are passed the result of the previous one.
Loaders work at the individual file level during or before the bundle is generated. Plugins: Plugins work at bundle or chunk level and usually work at the end of the bundle generation process.
There are four basic concepts in webpack: entry , output , modules and plug-ins . These configurations are added in webpack.
A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle.
Yes, the order matters: plugins are bound to the compiler and applied in the order specified. You can look into webpack/tapable for a clearer idea on how this works.
Usually, though, you are not forced to think about ordering when binding compiler and compilation plugins, as plugin authors expose specific events that help you reason when your handlers will be invoked.
58
Well, the answer is yes and no.
No because during the bundling, webpack emits several events which are fired at different phases of the compilation (you can read more about it here).
Each plugin must be hooked (by the plugin's author) to one of these events.
That being said, let's consider two plugins, A and B.
Even if A is listed before B in the config file, A will be executed before B only if it is hooked to an event that is fired before B's hooked event.
Yes because in case A and B are hooked to the same event, the execution order should be consistent with the order in the config file.
25
webpack is not a task runner. These plugins are tasks, which is not "webpack-style" and not supported. You can report the issue there, but there is nothing to do on webpack side (and I don't care much). -sokra
ref
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
