92

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?

3 Answers 3

92

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.

4
  • 27
    This could be more clear in the documentation :/. A year later and I'm still searching for the same thing. Jan 2, 2018 at 22:23
  • 2
    How does that link show how to set up the build order for a node project? Apr 9, 2019 at 22:04
  • 8
    There are many questions unanswered. How the order on the webpack.config.js plugins array affects the build process? Are plugins executed after or before loaders? Can webpack plugins be chained in series or parallel in the same way than gulp? I can see the tapable package offers some of that functionality. But it's hard to tell how the whole plugin system works in the end without a clearer explanation.
    – AxeEffect
    Apr 13, 2020 at 12:50
  • so they're applied top to bottom or left to right (depending on formatting)? Jun 8, 2021 at 17:37
6

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.

1

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

2
  • How does this answer the question? Sep 7, 2021 at 22:02
  • 1
    @zr0gravity7 The creator of Webpack says that the order of plugins is not respected and closed the issue requesting this feature in the link Sep 8, 2021 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.