https://github.com/aabuhijleh/reproduce-webpack-issue

https://github.com/aabuhijleh/reproduce-webpack-issue

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/aabuhijleh/reproduce-webpack-issue
• Owner: aabuhijleh
• License: mit
• Created: 2021-05-11T17:06:57.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-05-11T17:07:30.000Z (about 4 years ago)
• Last Synced: 2025-02-05T05:34:18.748Z (4 months ago)
• Language: JavaScript
• Size: 471 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• 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

```