How to properly combine aframe, threeJS, npm, and webpack? - node.js

Question

I am trying to understand the expected way to set up an AFRAME project and use npm/webpack to install dependencies, including things like three/addons.
I am new to node (and especially webpack), but I have a package.json set up to run a simple server:
{
"name": "test",
"version": "0.0.1",
"description": "test",
"main": "server.js",
"scripts": {
"start": "node server.js",
},
"dependencies": {
"aframe": "^1.3.0"
}
"engines": {
"node": ">=16"
}
}
In my /public directory, I have several html files + js files in various nested directories which use AFRAME (which I was previously loading from CDN).
What's the "right" way to give these scripts access to AFRAME without CDN? What about three, three/addons, or any other ThreeJS/AFRAME npm package?
I gather that I need to use webpack? Can I configure webpack to generate a single bundle.js file that includes all of my dependencies, and then import as desired from that? I don't fully understand the relationship between webpack's bundling and ES6 imports, or how to configure webpack in this way.
Thank you!
EDIT: based on the comments below, here is my package.json now:
{
"name": "test",
"version": "0.0.1",
"description": "test",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"aframe": "git://github.com/aframevr/aframe.git#54022b80c60b12dc755f4f4a71a779b410dd23d0",
"aframe-htmlembed-component": "^1.0.0",
"aframe-extras": "^6.1.1",
"aframe-instanced-mesh": "^0.6.1",
"networked-aframe": "^0.11.0",
"#react-three/drei": "^9.46.3"
},
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0"
},
"engines": {
"node": ">=16"
}
}
webpack.config.js:
// From: https://github.com/Chabloz/a-frame-webpack-boilerplate
const path = require("path");
const config = {
mode: "development",
devtool: "inline-source-map",
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "public/dist")
},
watch: false,
resolve: {
modules: [
path.resolve("./src"),
path.resolve("./node_modules")
]
},
externals: {
three: "THREE"
}
};
module.exports = (env, argv) => {
return config;
};
and /src/main.js:
// AFRAME
require("aframe");
// Helpers
require("aframe-htmlembed-component");
require("aframe-extras");
require("aframe-instanced-mesh/src/instanced-mesh");
require("#react-three/drei");
// NAF
require("networked-aframe");
This sucessfully generates /public/dist/bundle.js when I run webpack, and I can include it like so:
<script src="/dist/bundle.js"></script>
But when I try to import any of the modules in the bundle from another script (import * as THREE from "three"), I get Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".. If I change it to import * as THREE from "/dist/bundle.js", I get bundle.js:36779 Uncaught Error: A a-node type is already registered