Wordpress 5.8 Typescript Webpack Config - Gutenberg Blocks Development Environment

package.json

{
  "name": "wordpress-typescript-sample",
  "version": "1.0.0",
  "main": "build/index.js",
  "scripts": {
    "start": "wp-scripts start"
  },
  "dependencies": {
    "@wordpress/blocks": "^11.1.2"
  },
  "devDependencies": {
    "@wordpress/scripts": "^19.0.0"
  }
}

webpack.config.js

const { join } = require("path");

// Set default entry before loading wp webpack.config
process.env.WP_ENTRY = JSON.stringify({ index: join(__dirname, "src/index.tsx") });
/** @type {import("webpack").Configuration} */
const config = require("@wordpress/scripts/config/webpack.config");

// Add Shortcut import path @/ as src/
config.resolve = config.resolve || {};
config.resolve.extensions = config.resolve.extensions || [];
config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx');
config.resolve.alias = config.resolve.alias || {};
config.resolve.alias['@'] = join(__dirname, 'src');

// Add ts & tsx support
const babelLoader = config.module.rules.find(
    v => v.test instanceof RegExp && v.test.test('.jsx')
);
if (babelLoader) {
    babelLoader.test = /\.t|jsx?/
}

module.exports = config;