Webpack构造React + TS项目

记录一下不用CRA脚手架搭建react工程

一 基础依赖安装 首先初始化项目yarn init 接下来开始正式步骤：

1 用于处理webpack项目核心内容

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

webpack-cli（用于在命令行中运行webpack的工具） webpack-dev-server（用于启动本地服务器的库，具备监听本地代码，与浏览器进行长连接对接功能） html-webpack-plugin（根据模板文件自动生成HTML文件，将js自动插入到html中） 2 处理jsx，tsx的相关内容

yarn add -D babel-loader

yarn add -D @babel/core

yarn add -D @babel/preset-env @babel/preset-react @babel/preset-typescript

@babel/core（babel的核心模块），@babel/preset-env（babel预设之一，用于编译ES2015+语法）

yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

@babel/plugin-proposal-class-properties（在ES6中的class语法中定义类的属性）

3 style相关的模块

yarn add -D css-loader style-loader mini-css-extract-plugin
yarn add -D sass sass-loader

css-loader（解析css中的代码），style-loader(将解析的代码添加到style标签中)

4 React库以及运行姨奶react-dom

yarn add react react-dom
yarn add -D @types/react @types/react-dom

二 配置 1 webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin  = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",
    entry: {
        main: resolve(__dirname, 'src', 'index.tsx')
    },
    output: {
        filename: "index.js",
        path: resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    module: {
        rules:[
            {
                test: /\.tsx?/,
                use: [
                    'babel-loader'
                ],
                exclude: /node_moudles/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, 'public', 'index.html'),
            inject: 'body'
        }),
        new MiniCssExtractPlugin({
            filename: app.css
        })
    ],
    devServer: {
        port: 3010
    }
}

2 .babelrc--定义了babel/core要用到的预设和插件，对ts进行编译

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties"
    ]
}

3 tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "module": "es6",
        "moduleResolution": "node",
        "rootDir": "./src",
        "outDir": "./dist",
        "jsx": "react-jsx"
    },
    "exclude": [
        "dist",
        "node_modules"
    ]
}

三 编写项目代码 创建src目录以及入口文件

react.d.ts

declare module '*.module.scss' {
    const classes: { readonly [key: string]: string }
    export default classes
}

index.tsx

import { createRoot } from "react-dom/client";
import styles from './index.module.scss'


const root = createRoot(document.getElementById("root") as HTMLElement);
root.render (  
    <div className={styles.container}>
       just do it
    </div>
);

index.module.scss

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

四 运行

配置package.json脚本
{
  "name": "webpack5-react-pdfCanvas-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
     "start": "webpack-dev-server --config webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@babel/preset-env": "^7.23.6",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@types/react": "^18.2.46",
    "@types/react-dom": "^18.2.18",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.7.6",
    "sass": "^1.69.6",
    "sass-loader": "^13.3.3",
    "style-loader": "^3.3.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

yarn start运行