JSX and TS files in React are not supported by Webpack. There are two ways to use loader to parse TS and TSX into JS files. Another option is to use babel-loader+@babel/preset-typesrcipt

Initialize the project

mkdir webpack-react-ts
cd webpack-react-ts

yarn init -y
Copy the code

Install dependencies

React, react-dom, their corresponding @types/react, @types/react, and webpack dependencies

Yarn add react @types/react react-dom @types/react-dom yarn add [email protected] [email protected] [email protected] - DCopy the code

Configure the webpack.config.js file

Test file:

// index.tsx

import ReactDOM from "react-dom";
import React from "react"; // There are differences in this area as mentioned below
import App from "./App";

ReactDOM.render(<App />.document.getElementById("root"));


// App.tsx

import React from "react";
import Hello from "./Hello";
function App() {
  return (
    <div>
      <p>Hello, React</p>
      <Hello name="小徐" age={26} />
    </div>
  );
}
export default App;

// Hello.tsx

import React, { useEffect } from "react";

interface HelloProps {
  name: string;
  age: number;
}
const Hello: React.FC<HelloProps> = (props: HelloProps) = > {
  useEffect(() = >{} []);const changeName = () = > {
    console.log(props.name);
  };
  return (
    <div>
      <p>Name: {props. The name}</p>
      <p>Age: {props. Age}</p>
      <button onClick={changeName}>Change the name</button>
    </div>
  );
};
export default Hello;


Copy the code

The basic configuration is as follows:

const path = require("path");
const { HotModuleReplacementPlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.tsx".output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  },
  mode: "development".devtool: "cheap-module-eval-source-map".devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 8080.hot: true.open: true
  },
  resolve: {
    extensions: [".tsx".".ts".".js"]},module: {... There are two methods configured here},plugins: [
    new HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html"}})];Copy the code

In addition, tsconfig.json is configured as follows:

{
  "compilerOptions": {
    "target": "es5"."module": "commonjs"."allowJs": true."jsx": "react-jsx"."outDir": "./dist/"."noImplicitAny": true."moduleResolution": "node"."esModuleInterop": true."sourceMap": true}}Copy the code

Method 1: Use ts-Loader to parse TS and TSX files

Ts-loader installation should pay attention to the version of webpack, webpack4 corresponds to ts-loader@8, do not need to install the loader related to Babel

yarn add ts-loader@8 -D 
Copy the code

You don’t need to import import React from “React”

Modify loader in webpack.config.js configuration file

module: {rules: [{test: /\.tsx? $/,
        use: "ts-loader".exclude: /node_modules/}}]Copy the code

Method 2: Continue using babel-loader+ preset @babel/preset-typescript

The. Babelrc file is as follows:

{
  "presets": [["@babel/preset-env",
      {
        "useBuiltIns": "usage"}], ["@babel/preset-react",
      {
        "runtime": "automatic" // Automatically introduce React}]."@babel/preset-typescript"]}Copy the code

Install the Loader related to Babel

yarn add @babel/core @babel/preset-env babel-loader @babel/preset-react @babel/preset-typescript -D
Copy the code

Import React from “React”. Babelrc runtime: automatic Import

Modify loader in webpack.config.js configuration file

module: {
    rules: [{test: /\.(j|t)sx? $/,
        include: [path.resolve(__dirname, "src")].use: ["babel-loader"]]}},Copy the code

Start NPX webpack-dev-server to see the page