Excluding popper.js from Your WebPack Bundle

Discover how to effectively exclude `popper.js` from your WebPack bundle using the externals configuration, ensuring a leaner JavaScript output without unnecessary dependencies.
---
This video is based on the question https://stackoverflow.com/q/67789953/ asked by the user 'Giedrius' ( https://stackoverflow.com/u/2145868/ ) and on the answer https://stackoverflow.com/a/70811390/ provided by the user 'Top-Master' ( https://stackoverflow.com/u/8740349/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: WebPack - exclude popper.js from the bundle (using externals config)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Excluding popper.js from Your WebPack Bundle: A Step-by-Step Guide

When working with modern JavaScript frameworks and libraries, managing dependencies can become a complex task. One common hurdle developers face is including and excluding certain libraries in their projects, particularly when using bundlers such as WebPack. In this guide, we'll discuss how to exclude popper.js from your WebPack bundle to ensure a more efficient use of resources.

The Problem

You might be creating an ES6 module with a dependency on tippy.js, which itself relies on popper.js. Often, developers load popper.js via a <script> tag to use it globally on their web pages. However, the modules generated by WebPack may still include unnecessary popper related code in the final bundle, which can bloat your application and slow down load times.

Here's a quick overview of what you're facing:

You already include popper.js via a global script tag.

WebPack is still bundling popper.js methods, increasing your bundle size unnecessarily.

You're looking for a way to configure WebPack to exclude these methods without disrupting the functionality of tippy.js.

The Solution

Step 1: Use Global Version of Popper.js

If you want to utilize the global version of popper.js that's loaded from a CDN, this can be easily achieved by defining a global variable in your WebPack configuration:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Setting Up Externals in WebPack

To prevent WebPack from including popper.js in your bundle, you need to make use of the externals option in your webpack.config.js:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Externals:

Using externals, you instruct WebPack not to bundle the specified libraries, assuming they are available in the global scope.

For popper.js, we set it to return a modified object from the global window object to ensure compatibility with how popper.js is used in your ES6 modules.

Step 3: Imports and Usage

With the externals configured, if you previously needed to use methods directly from popper.js, you can safely ignore importing them in your module code since they will be handled through the external configuration:

[[See Video to Reveal this Text or Code Snippet]]

Remember:

When using require to get a property from popper.js, you need to ensure you're accessing the default export correctly. For instance:

[[See Video to Reveal this Text or Code Snippet]]

This is important for WebPack version compatibility, as it deals with how the library is exposed in the CommonJS object format.

Conclusion

By properly configuring WebPack to treat popper.js as an external dependency, you can significantly reduce the size of your final JavaScript bundle. The steps outlined in this post should help streamline your setup—allowing you to focus on building features rather than worrying about unnecessary bloat in your application.

Feel free to reach out in the comments below if you have any questions or run into issues while implementing this solution. Happy coding!

Видео Excluding popper.js from Your WebPack Bundle канала vlogize