https://github.com/saltyshiomix/webpack-typescript-react-starter

Webpack + TypeScript + React = ❤️
https://github.com/saltyshiomix/webpack-typescript-react-starter

react typescript webpack

Last synced: 2 months ago
JSON representation

Webpack + TypeScript + React = ❤️

• Host: GitHub
• URL: https://github.com/saltyshiomix/webpack-typescript-react-starter
• Owner: saltyshiomix
• License: mit
• Created: 2018-11-15T19:15:06.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-11-22T17:25:48.000Z (about 4 years ago)
• Last Synced: 2024-10-12T05:46:49.569Z (3 months ago)
• Topics: react, typescript, webpack
• Language: JavaScript
• Homepage:
• Size: 2.79 MB
• Stars: 58
• Watchers: 4
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Webpack + TypeScript + React = ❤️



  



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

```js

// 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`:

```json

{

  "presets": [

    "@babel/env",

    "@babel/react",

    "@babel/typescript"

  ]

}

```

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

## Usage

```bash

# 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

```