WebPack - exclude popper.js from the bundle (using externals config)

Question

I am creating a ES6 JS module with tippy.js dependency:

import tippy, { Instance, Props } from 'tippy.js';

Tippy.js depends on popper.js lib, which I include via tag for other purposes. Webpack output for the module includes many popper methods listed below. I am trying to exclude these from the output with webpack externals property:

externals: {
        jquery: 'jQuery',
        popperjs: '@popperjs/core/lib'
    },

also I tried to import some of the popper methods directly into the module:

import { createPopper } from "@popperjs/core/lib";
import getCompositeRect  from "@popperjs/core/lib/dom-utils/getCompositeRect";

but I am not sure I need to import them, since I don't use them directly. Tippy.js depends on them. Unfortunately webpack output still includes popper methods. Any ideas? Thank you!

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "popperGenerator": () => (/* binding */ popperGenerator),
/* harmony export */   "createPopper": () => (/* binding */ createPopper),
/* harmony export */   "detectOverflow": () => (/* reexport safe */ _utils_detectOverflow_js__WEBPACK_IMPORTED_MODULE_13__.default)
/* harmony export */ });
/* harmony import */ var _dom_utils_getCompositeRect_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./dom-utils/getCompositeRect.js */ "./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js");
/* harmony import */ var _dom_utils_getLayoutRect_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./dom-utils/getLayoutRect.js */ "./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js");
/* harmony import */ var _dom_utils_listScrollParents_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dom-utils/listScrollParents.js */ "./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js");
/* harmony import */ var _dom_utils_getOffsetParent_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./dom-utils/getOffsetParent.js */ "./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js");
/* harmony import */ var _dom_utils_getComputedStyle_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./dom-utils/getComputedStyle.js */ "./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js");
/* harmony import */ var _utils_orderModifiers_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/orderModifiers.js */ "./node_modules/@popperjs/core/lib/utils/orderModifiers.js");
/* harmony import */ var _utils_debounce_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./utils/debounce.js */ "./node_modules/@popperjs/core/lib/utils/debounce.js");
/* harmony import */ var _utils_validateModifiers_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/validateModifiers.js */ "./node_modules/@popperjs/core/lib/utils/validateModifiers.js");
/* harmony import */ var _utils_uniqueBy_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/uniqueBy.js */ "./node_modules/@popperjs/core/lib/utils/uniqueBy.js");
/* harmony import */ var _utils_getBasePlacement_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/getBasePlacement.js */ "./node_modules/@popperjs/core/lib/utils/getBasePlacement.js");
/* harmony import */ var _utils_mergeByName_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/mergeByName.js */ "./node_modules/@popperjs/core/lib/utils/mergeByName.js");
/* harmony import */ var _utils_detectOverflow_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./utils/detectOverflow.js */ "./node_modules/@popperjs/core/lib/utils/detectOverflow.js");
/* harmony import */ var _dom_utils_instanceOf_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./dom-utils/instanceOf.js */ "./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js");
/* harmony import */ var _enums_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./enums.js */ "./node_modules/@popperjs/core/lib/enums.js");

Answer 1

The accepted answer from this thread guided me to solve this: Webpack Externals Configuration for a Local Library

I just needed to lookup how popperjs was referenced in tippyjs and use the same alias:

externals: {
    '@popperjs/core': '@popperjs/core'
},

Answer 2

If we want to use already loaded Popper v1.x, we do:

const myPopper = window.Popper;

I mean, loaded by <script> tag from somewhere like CDN.

If we want use Popper v1.x NPM package, we do:

const myPopper = require('popper.js').default;

Which causes Popper's source to be boundled with ours.

Did you notice? we need .default after require (for whatever reason).

In order for WebPack version 1.7.5+ to treat our require as external, in webpack.conf.js file, try something like:

module.exports = {
    externals: {
        'popper.js': 'Object.assign(window.Popper, {default: window.Popper})',

        // Above wanted to be clear, else could leave-out "window." part, like:
        lodash: '_',
        jquery: 'jQuery',
        bootstrap: 'bootstrap',
    },
};

Now we can use require('popper.js').default , but the Popper already loaded from CDN gets returned.