Multiple Webpack builds

This week, I learned how to run multiple webpack builds on same website sing jsonpFunction

Photo by Markus Spiske on Unsplash

There are times when you want to run multiple JavaScript applications on the same page.

For example, you have a main Angular app and a chat widget written in Reactjs.

If you are using Webpack v4, you will likely run into this code splitting issue.

As always, you have many solutions at your disposal!

1. You can upgrade your Webpack, which (in my experience) is always a time consuming for big teams.
2. You could also dig into Webpack documentation and after a day, you realize that there is a config option (jsonpFunction) that you can use!

Conclusion

Webpack can help you achieve almost any build process that suits your need. However, be prepared to spend a bit of time on its documentation.

Checkout this repo for details on the issue and the fix

Resource:

• https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-unique-naming
• https://v4.webpack.js.org/configuration/output/#outputjsonpfunction