前言

TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通 JavaScript 代码。这篇我们将会学习是如何将 webpack 和 TypeScript 进行集成。

安装依赖

npm install --save-dev typescript ts-loader

新增tsconfig.json配置文件

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "allowSyntheticDefaultImports": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react-jsx",
        "allowJs": true,
        "moduleResolution": "node",
        "baseUrl": "./src",
        "paths": {
            "@": ["./"],
            "@/plugins": ["./plugins"],
            "@/css": ["./css"],
            "@/layout": ["./layout"],
            "@/pages": ["./pages"],
            "@*": ["./*"]
        }
    }
}

修改webpack配置文件

// resolve新增扩展

resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    // 省略之后的配置
  },


// 新增ts-loader配置
  module: {
    rules: [
     // 省略之前的配置
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ],
  },

安装react的type库

npm i —save-dev @types/react

安装完成之后，我们就可以引入react找到对应react type库

项目新增.d.ts

// src/react-app-env.d.ts

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
    interface ProcessEnv {
      readonly NODE_ENV: 'development' | 'production' | 'test';
      readonly PUBLIC_URL: string;
    }
  }
  
  declare module '*.avif' {
    const src: string;
    export default src;
  }
  
  declare module '*.bmp' {
    const src: string;
    export default src;
  }
  
  declare module '*.gif' {
    const src: string;
    export default src;
  }
  
  declare module '*.jpg' {
    const src: string;
    export default src;
  }
  
  declare module '*.jpeg' {
    const src: string;
    export default src;
  }
  
  declare module '*.png' {
    const src: string;
    export default src;
  }
  
  declare module '*.webp' {
      const src: string;
      export default src;
  }
  
  declare module '*.svg' {
    import * as React from 'react';
  
    export const ReactComponent: React.FunctionComponent<React.SVGProps<
      SVGSVGElement
    > & { title?: string }>;
  
    const src: string;
    export default src;
  }
  
  declare module '*.module.css' {
    const classes: { readonly [key: string]: string };
    export default classes;
  }
  
  declare module '*.module.scss' {
    const classes: { readonly [key: string]: string };
    export default classes;
  }
  
  declare module '*.module.sass' {
    const classes: { readonly [key: string]: string };
    export default classes;
  }
  
  declare module '*.module.less' {
    const classes: { readonly [key: string]: string };
    export default classes;
  }
  

有了这个文件，ts-loader会自动帮我们处理资源问题，还有NodeJS中的环境变量

创建一个tsx组件

// src/components/HelloWorld.tsx

import React from 'react';

const HelloWorld: React.FC= () => {
  return <div>hello world</div>;
};

export default HelloWorld;

修改App.tsx

import React from 'react';
import HelloWorld from '@/components/HelloWorld';

function App(): React.ReactElement {
  return (
    <div className="app">
      React App
      <HelloWorld />
    </div>
  );
}

export default App;

到这里我们的webpack 5 创建react应用已经结束了

项目仓库: https://gitee.com/semyin/webpack-react