Getting started with webpack and ES6 modules

Native modules aren’t here just yet so here’s a few tips to get started!

Photo by Adam King on Burst

I used to think that webpack was one of those impossible to get started with technologies. Turns out, getting started with webpack and using ES6 modules isn’t so bad!

Let’s go through a tiny, very basic webpack based project. We’ll look at the project structure, the configuration files, and a simple, high-level example of using webpack with ES6 modules.

• You can follow along with the demo project source code on GitHub!
• See the demo project in action!

Ready? Let’s go! 🚀

Project structure

I’m a big fan of keeping things neat and organized, not just in my web projects but in real-life, too. Let’s see how this demo project is setup:

- index.html
- package.json
- webpack.config.js
- /src
    |- app.js
    |- /modules
        |- (various module files)
- /dist
    |- bundle.js

• index.html is our HTML file which outputs the JavaScript content to the browser window.
• package.json is our overall project configuration and meta data. This also has information on which third-party Node.js modules our project requires to work…