I'm working on my first TypeScript library (it's actually even my first JavaScript library) which is used in the front-end. In essence, it should expose a function which receives a DOM element and adds another DOM element to it as a child.

I would like to use Webpack to bundle the library and during configuration of it and TypeScript I stumbled across module systems. And they are confusing me.

In tsconfig.json I can define which module system should be used in the compiled code, if I understand correctly:

{
  "compilerOptions": {
    "module": "es6"
  }
}

And in the webpack.config.js I am able to set a desired target for my library using output.library.type, where I can again specify a module system:

module.exports = {
  output: {
    library: {
      name: 'my-lib',
      type: 'umd',
    }
  },

I only need my library to be installable via npm/yarn:

$ yarn add my-lib

And consumable via an an import statement like that:

import { myFunc } from 'my-lib';

So far so good, with these settings it seems to do what I want. But I don't understand what I am doing here. Hence the questions: What is the difference between the two module system configuration options (the one in the TypeScript config and the one in the Webpack config)? And what settings are appropriate for my use case?