webpackでexport functionがビルド出来ない

Question

前提・実現したいこと

webpackを用いて以下のTypeScriptファイルtest.tsからコンパイルされたJavaScriptのファイルtest.jsが得たいです。

• test.ts

export function testFun(): void{
  console.log('test');
}

得られたJavaScriptのファイルについて以下のように用いたいです。

import {testFun} from 'test.js';
testFun(); // test!

const t = await import('test.js');
t.testFun(); // test!

発生している問題・エラーメッセージ

webpackでビルドしたところ、以下のように出力ファイルが空となってしまいます。

(()=>{"use strict"})();

該当のソースコード

• test.ts

export function testFun(): void{
  console.log('test');
}

試したこと

tscによるコンパイルでは、以下のように問題なくexport functionが出力されました。

export function testFun() {
    console.log('test');
}

補足情報

設定ファイルは以下のようにしています。

• package.json

{
  "name": "test",
  "scripts": {
    "t": "tsc",
    "w": "webpack"
  },
  "devDependencies": {
    "ts-loader": "^9.2.5",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2"
  }
}

• tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
  }
}

• webpack.config.js

module.exports = {
    mode: "production",
    entry: './test.ts',
    output: {
        filename: 'test.js',
    },
    module: {
        rules: [{
            test: /.ts$/,
            use: 'ts-loader'
        }]
    },
    resolve: {
        extensions: ['.ts', '.js']
    }
}

Comments

[hoshi-takanori]

たぶん、普通に webpack すると独立したプログラムとみなされて、呼ばれてない関数は捨てられるのでは。
ライブラリ用の設定が必要な気がします。(細かいことはよく分かりませんが…。)
https://qiita.com/jkr_2255/items/283bc12dd07bc237179e

Answer 1

webpackの設定ファイルを以下のように修正することで解決しました。参考

• webpack.config.js

module.exports = {
    mode: "production",
    entry: './test.ts',
    output: {
        filename: 'test.js',
        library: {
            type: 'module',
        },
    },
    module: {
        rules: [{
            test: /.ts$/,
            use: 'ts-loader',
        }],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    experiments: {
        outputModule: true,
    },
}