Webpack 从空文件夹搭建 React + TypeScript 运行环境

2023-10-01 16:48:06

从空文件夹开始搭建 React + TypeScript 运行环境

1. 项目初始化

首先，创建一个新的文件夹，作为项目的根目录。然后，在根目录下运行以下命令初始化一个新的 npm 项目：

npm init -y

这将创建一个名为 package.json 的文件，其中包含项目的基本信息。

2. 安装必要的依赖项

接下来，我们需要安装必要的依赖项。首先，安装 Webpack 和 TypeScript 的依赖项：

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

然后，安装 React 和 ReactDOM 的依赖项：

npm install react react-dom

3. 配置 Webpack

接下来，我们需要配置 Webpack。在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

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

4. 创建 React 应用

接下来，我们需要创建一个 React 应用。在 src 目录下创建一个名为 index.tsx 的文件，并添加以下内容：

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

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

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