Minimalist TypeScript Bundling for Modern Browsers

This setup is effectively just half of this post by the inimitable Dr. Axel Rauschmayer. In my case, I'm often serving the client from a backend application, so I don't need the serving bit.

package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "clean": "rm -rf dist/**",
    "wp": "npm run clean && webpack",
    "wpw": "npm run clean && webpack --watch"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.4.0",
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist",
    "target": "es2019",
    "lib": [
      "es2019",
      "dom"
    ],
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true
  }
}

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    app: "./src/app.ts",
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name]-bundle.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'index.html'),
        }
      ]
    }),
  ],
};