Understanding JavaScript Packages and Bundles

Writing your own JavaScript is pretty straightforward, but things get a little hairy when you first try to install an NPM package and use it in your JavaScript file.

You see that you’re supposed to install it and then import it at the top of your JavaScript file, but you get errors about “require” not being defined or about “imports” needing to be at the top of the file.

This is where Webpack comes in. Most NPM packages have dependencies on other packages. When you install an NPM package, it installs the package and all of its dependencies, but the code in your project doesn’t know that.

There’s also the fact that you have to bundle your JavaScript before many things will work how they’re supposed to.