React + Typescript + Webpack构建项目的前世今生

很早就想从npm init开始纯手工搭个React项目（以前常常都是直接脚手架或者ctrl+C ctrl+V前人搭好的改改就继续用了），刚好最近工作上要写个demo，就想着趁机来操作（摸鱼）一手，顺便记录一下。尽管现在各种脚手架已经很多很方便了，诸如vue-cli、create-react-app等，但了解一下这些脚手架的底层原理还是很有必要的，而且手动搭项目的流程其实很简单，且可以加深对项目的理解。

前提环境

• nodejs环境
• npm或yarn包管理工具
• 文本编辑器（如VSCode、Sublime Text等）

项目搭建

首先，创建一个项目文件夹，并进入该文件夹。然后，初始化一个npm项目：

npm init -y

这会创建一个package.json文件，其中包含项目的基本信息和依赖项。

接下来，安装React、Typescript和Webpack：

npm install react react-dom typescript @types/react @types/react-dom webpack webpack-cli

安装完成后，创建以下文件：

• src/index.tsx：React应用程序的入口文件
• src/App.tsx：React组件文件
• webpack.config.js：Webpack配置文件
• package.json：项目配置和依赖项清单文件
• tsconfig.json：Typescript配置文件

在index.tsx文件中，编写如下代码：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

在App.tsx文件中，编写如下代码：

import React from "react";

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

export default App;

在webpack.config.js文件中，编写如下代码：

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
      },
    ],
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
  },
};

在package.json文件中，添加以下脚本：

{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  }
}

项目运行

运行以下命令启动项目：

npm start

这会启动Webpack开发服务器，并将项目运行在localhost:9000端口上。

打开浏览器，访问http://localhost:9000，即可看到项目运行结果。

项目构建

运行以下命令构建项目：

npm build

这会将项目构建成生产环境代码，并输出到dist文件夹中。

结语

以上就是从零开始手动搭建一个React + Typescript + Webpack项目的步骤。希望这篇教程对您有所帮助。