How to add custom code to Webpack assembly on the fly?

Question

JavaScript

Webpack has a wonderful LazyLoading that allows you to parse modules into small files and load them on the fly. For example, when you click on the cart button, the cart functionality is loaded. I'm currently writing a system that supports the plugin system. That is, in the admin panel, you can add arbitrary JS code, which should eventually work out in certain sections of the system. The problem is that building Webpack every time someone adds code will not work, and it's not right. You can break everything, and the assembly after n time will contain a large amount of garbage. The second problem is scope. It is necessary that the "plugin" file also has access to some objects that are inside the Webpack function. Any ideas how to implement such a load in this situation?

Answer 1

If you do not allow third-party developers to wedge into the build process and do not give the opportunity to rebuild the project at all, then webpack can hardly do this. In webpack, modules must be predictable at build time, and as far as I know, loading them dynamically from external sources will not work.
You can either rebuild the project when adding third-party plugins and simply load all plugins from certain folders (using require.context), or write your own dynamic loader.
Passing dependencies to plugins is not a problem at all with either approach. It's just that each plugin should have some kind of initialization function into which you can pass the necessary dependencies as arguments. If desired, you can even stir up some DI.