How to achieve inheritance in ES6 with "webpack module bundler"?

Question

Unable to achieve inheritance in ES6 classes, when import two file using webpack module bundler with babel

My directory structure looks like

webpack.config.js looks like

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
    {
      loader: "babel-loader",
      // Only run `.js` and `.jsx` files through Babel
      test: /\.jsx?$/,
      // Options to configure babel with
      query: {
        presets: ['es2015'],
      }
    },
  ]
  }
};

Entry.js looks like

import './content.js';
import './content1.js';

content.js looks like

export class addition {
  constructor(){
    this.x = 10 ;
  }
}

content1.js looks like

class subtraction extends addition{
  constructor(){
    super();
    this.y = this.x - 5 ;
  }
}

var inst = new subtraction();
console.log(inst.x, inst.y)

after generate bundle.js with webpack and run index.html: Getting error like

Kindly help me to figure out, how to achieve inheritance in ES6 with webpack module bundler.

Answer 1

Each module must import all of its dependencies:

import {addition} from './content';

class subtraction extends addition {
  // ...
}