Webpack + TypeScript + React = ❤️

As of Babel v7, now we can handle .ts or .tsx files same as .js or .jsx files like this:

// webpack.config.js

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: [/\.jsx?$/, /\.tsx?$/],
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
}

Use babel-loader to /\.tsx?$/ ?!

Yes, babel-loader. See .babelrc:

{
  "presets": [
    "@babel/env",
    "@babel/react",
    "@babel/typescript"
  ]
}

Thanks to @babel/preset-typescript, we can handle /\.tsx?$/ files same as /\.jsx?$/ files :)

Usage

# installation
$ yarn

# development mode
# it automatically opens `http://localhost:8080` in your default browser,
# and you'll see "Webpack + TypeScript + React = ❤️"
$ yarn dev

# check types
$ yarn check-types

# production build
$ yarn build

# production mode
$ yarn start