webpack5 + react + typescript搭建项目的新手完整指南

前言

本文是对某开源的项目webpack5 + react + typescript项目地址逐行代码做分析，解剖一个成熟的环境所有配置的意义，理清一些常见的问题，比如 文件中的 import 转es5。

项目地址

https://github.com/username/webpack5-react-typescript

正文

文件夹结构

├── package.json
├── yarn.lock
├── src
│   ├── App.tsx
│   ├── index.tsx
│   ├── components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── Main.tsx
│   │   ├── Sidebar.tsx
│   │   └── Content.tsx
│   ├── pages
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   │   ├── Contact.tsx
│   │   └── 404.tsx
│   ├── styles
│   │   ├── main.css
│   │   ├── header.css
│   │   ├── footer.css
│   │   ├── content.css
│   │   └── sidebar.css
│   └── utils
│       ├── fetch.ts
│       ├── storage.ts
│       └── format.ts
├── public
│   ├── index.html
│   ├── favicon.ico
│   ├── manifest.json
│   └── robots.txt
└── webpack.config.js

package.json

{
  "name": "webpack5-react-typescript",
  "version": "1.0.0",
  "description": "A starter project for building React applications with webpack 5 and TypeScript.",
  "main": "src/index.tsx",
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "dependencies": {
    "@types/react": "^17.0.34",
    "@types/react-dom": "^17.0.14",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "babel-loader": "^8.2.4",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.4"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  devServer: {
    historyApiFallback: true,
    port: 3000,
    open: true,
  },
};