项目文件结构

2023-12-17 16:47:21

从头开始使用 Webpack 5 构建 React + TS 项目

简介

React 和 TypeScript 已成为构建交互式前端应用程序的主流选择。本文将指导您从零开始使用 Webpack 5 配置 React + TS 项目，让您完全掌控项目设置。

搭建 Webpack

安装 Webpack CLI ：运行以下命令全局安装 Webpack CLI：npm install -g webpack-cli
创建新项目 ：使用 npm 初始化新项目：npm init -y
安装 Webpack ：使用以下命令安装 Webpack：npm install --save-dev webpack webpack-cli
创建 webpack.config.js ：在项目根目录创建一个 webpack 配置文件。

├── package.json
├── src
│   └── index.tsx
├── tsconfig.json
├── webpack.config.js
└── node_modules

配置 Webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

集成 TypeScript

安装 TypeScript ：安装 TypeScript 和 TypeScript 加载器：npm install --save-dev typescript ts-loader
创建 tsconfig.json ：在项目根目录创建一个 TypeScript 配置文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "./dist"
  }
}

运行项目

安装开发依赖项 ：安装必需的开发依赖项：npm install --save-dev react react-dom
创建 src/index.tsx ：创建入口 TypeScript 文件：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, world!</h1>;
};

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