webpack5 手动构建 React TS 项目：为专业开发奠定基础

2023-09-28 12:27:15

前言：
在现代前端开发中，webpack 和 TypeScript 是必不可少的工具。webpack 是一个模块打包器，可以将各种资源（如 JavaScript、CSS、图片等）打包成单个文件，便于浏览器加载和运行。TypeScript 是一种强大的 JavaScript 超集，可以帮助开发者编写更加健壮、可维护的代码。本文将详细介绍如何使用 webpack5 手动搭建 React TS 项目，为专业开发奠定基础。

初始化项目：

准备环境：确保已安装 Node.js 和 npm。
初始化项目：创建一个空白目录，并执行以下命令：

npm init -y

这将创建一个 package.json 文件，用于管理项目的依赖。

初始化 TypeScript 配置：

安装 TypeScript：

npm install --save-dev typescript

创建 tsconfig.json 文件：

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

这将配置 TypeScript 编译器，使其能够正确编译 TypeScript 代码。

安装必要的依赖：

安装 webpack 和 webpack-cli：

npm install --save-dev webpack webpack-cli

安装 React 和 ReactDOM：

npm install --save react react-dom

安装 TypeScript 相关的依赖：

npm install --save-dev @types/react @types/react-dom

配置 webpack：

创建 webpack 配置文件 webpack.config.js：

const path = require('path');

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

这将配置 webpack，使其能够正确加载和编译 TypeScript 代码。

集成 React：

在 src 目录下创建 index.tsx 文件：

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

const App = () => <h1>Hello World!</h1>;

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