Webpack - production build empty file

Question

I've setup a simple project with Webpack and TypeScript and I'm testing the production build with Webpack, but I can't figure it out why the built file is completely empty?

The main.ts file contains only one simple function and when I run webpack --mode production I can found the main.js file in the dist folder, but it's empty (0 bytes) and I'm not sure why is that?

src/main.ts

export const add = (n1: number, n2: number): number => {
  return n1 + n2
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.ts(x)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [
      '.tsx',
      '.ts',
      '.js'
    ]
  }
};

module.exports = config;

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "es6",
        "moduleResolution": "node",
        "target": "es5",
        "allowJs": true,
        "declaration": true
    },
    "include": [
        "./src/**/*"
    ]
}

Answer 1

I solved this issue by adding libraryTarget: 'umd' to the output property of the Webpack config object.

There's a few more options that can be set on the same place to suit your needs:

{
    // ...
    globalObject: 'this',
    umdNamedDefine: true,
    libraryExport: 'default'
}