Importing Javscript File vs Webpack Building Bundle for CannonDebugRenderer

Question

I am trying to set up an instantiate and instance of CannonDebugRenderer for an application I am building on top of Three.js and Cannon.js. I am looking at this example that involves the use of Cannon.js and Three.js together

https://github.com/schteppe/cannon.js/blob/master/tools/threejs/example.html

This example appears to run a number of scripts before running the main script in the script tags.

Up to this point, I have been using Three.js by saving it as a dependency using NPM, which I assume pulls it from the github repo https://github.com/mrdoob/three.js/

I am able to import it into my script using what I have been given to understand is common ES6 syntax and to transpile it with webpack

import * as THREE from "three"

My understanding is that this depends on a couple of things

1. Webpack understanding that "three" is actually node_modules/three/build/three.min.js so it knows where to pull from when transpiling
2. NPM tracking the right metadata (perhaps in package.json) that allows webpack to find this

Mu confusion lies into how this example I listed above from cannon.js fits into this packaging and bundling build cycle.

First problem is that there seems to be a three.js in the lib directory of the Cannon repo that the examples use, rather than the three.min.js from the official NPM-managed directory in node_modules/three

https://github.com/schteppe/cannon.js/blob/master/libs/Three.js

Second problem is that the CannonDebugRenderer seems to be included in this Cannon.js-packaged version of Three.js, but not in the official Three.js itself.

Is Cannon meant to be bundled the way Three.js appears to be? The README on the repo seems to suggest it is NPM compatiable, but maybe that only includes the ability to grab it from the repository but not to bundle it with Webpack the way Three.js is able to be bundled?

How can I import CannonDebugRenderer with ES6 syntax and bundle the app into a single Javascript file?