ブラウザ用typescriptの設定

package.json

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.3.4",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2"
  }
}

tsconfig.json

{
	"compilerOptions": {
		"target": "es2020",
		"module": "esnext",
		"lib": ["es2020", "dom"],
		"sourceMap": true,
		"rootDir": "src",
		"baseUrl": "src",
		"moduleResolution": "node",
		"strict": true,
		"allowUnreachableCode": false
	},
	"include": ["./src/**/*"]
}

webpack.config.js

const path = require("path");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
	mode: "development",
	devtool: "inline-source-map",
	entry: "./src/index.ts",
	module: {
		rules: [
			{
				test: /\.ts$/,
				use: "ts-loader",
				exclude: /node_modules/,
			},
		],
	},
	resolve: {
		modules: [path.resolve(__dirname, "src"), "node_modules"],
		// .ts と .jsがないとModuleエラー
		extensions: [".ts", ".js"],
		plugins: [new TsconfigPathsPlugin({ configFile: "tsconfig.json" })],
	},
	output: {
		filename: "bundle.js",
	},
	experiments: {
		topLevelAwait: true,
	},
};