Use webpack to bundle several ES6 classes into one file for import in a script tag

In each classN.js, export each class by export default One either at the end of the file, of at the beginning(As you do in your "One" example, but not the others). In your index.js, import each by such: import One from './classN.js', of course assuming they are in the same folder(if not, add proper pathing). It will then be included in your main index.js, and bundled with Webpack.

In your case, this means your index.js would start out something like this:

import One from ('./src/class1.js')import Two from ('./src/class2.js')import Three from ('./src/class3.js')

This is assuming you export all your classes like One in your example, so:

export default class One {// code goes here

export default class Two {// code goes here

export default class Three {// code goes here

You're pretty much there, but it looks like you're a bit confused by the import/export syntax.

First of all you export the classes differently. In ./src/class1.js you use the default export: export default class One { but in the other two you use named exports export { Two }. To import them correctly you would have:

import One from './src/class1'import { Two } from './src/class2'import { Three } from './src/class3'

Because require works differently from ES modules the equivalent with require is:

const One = require('./src/class1').default;const Two = require('./src/class2').Two;const Three = require('./src/class3').Three;

Then you can simply export them with:

export { One, Two, Three }

And in your index.html you need to add the library prefix:

<script type="text/javascript">  console.log(ebjs.One, ebjs.Two, ebjs.Three);</script>