React18 + webpack5 + typescript （一）项目框架搭建

Shawn_Tang123

已于 2023-11-07 11:26:50 修改

阅读量558

点赞数 3

分类专栏： React18+webpack5+typescript 文章标签： typescript javascript 前端

于 2023-07-02 14:12:47 首次发布

本文链接：https://blog.csdn.net/weixin_41180545/article/details/131500405

版权

React18+webpack5+typescript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、前提条件

1、node版本

小编在创作时，使用的node版本是v18.9.0

node -v
v18.9.0

二、项目初始化

1、我们先创建一个react-webpack-project 的文件夹

mkdir react-webpack-project

2、npm 初始化，创建一个“package.json”文件，其中包含项目的基本信息，库/插件详细信息。

cd react-webpack-project
npm init (or npm init -y)

3、install node module

npm install

4、安装react

npm install -S react react-dom

5、安装typescript相关

安装typescript 以及相关 type definition

npm install typescript -D
npm install @types/node @types/react @types/react-dom -D

6、安装和配置webpack

Step 1、安装webpack

npm  install -D webpack webpack-cli webpack-dev-server

Step 2、HTML webpack plugin (一个可简化HTML文件创建的插件)

npm install -D html-webpack-plugin

Step 3、css 插件

npm install -D  style-loader css-loader

Step 4、copy-web pack-plugin(一个用于移动资源的插件)

npm install -D copy-webpack-plugin

Step 5、ts-loader（使webpack 能够处理ts、tsx文件的插件）

npm install ts-loader -D

到目前为止，package.json 的依赖如下

{
"name": "react-webpack-typescript",

"version": "1.0.0",

"description": "",

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"

},
"author": "",

"license": "ISC",

"devDependencies": {
   "@types/node": "^20.3.3",

   "@types/react": "^18.2.14",

   "@types/react-dom": "^18.2.6",

   "copy-webpack-plugin": "^11.0.0",

   "css-loader": "^6.8.1",

   "html-webpack-plugin": "^5.5.3",

   "style-loader": "^3.3.3",

   "ts-loader": "^9.4.4",

   "typescript": "^5.1.6",

   "webpack": "^5.88.1",

   "webpack-cli": "^5.1.4",

   "webpack-dev-server": "^4.15.1"

   }
}

7、创建webpack文件以及确定基础目录结构

Step1、创建文件以及目录，安装如下结构创建
在这里插入图片描述

Step2、修改index.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />

<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" style="width: 100%; height: 100%;"></div>
</body>
</html>

Step2、修改tsconfig.json, (具体配置项请自行搜索效果)

{
"compilerOptions": {
    "experimentalDecorators": true,

    "baseUrl": ".",

    "lib": ["dom", "es5", "es6", "es7", "dom.iterable", "esnext"],

    "allowJs": true,

    "skipLibCheck": true,

    "esModuleInterop": true,

    "allowSyntheticDefaultImports": true,

    // "strict": true,
    "noImplicitAny": true,

    "module": "ESNext",

    "target": "es2015",

    "forceConsistentCasingInFileNames": true,

    "noFallthroughCasesInSwitch": true,

    "moduleResolution": "node",

    "resolveJsonModule": true,

    "isolatedModules": true,

    "noEmit": false,

    "jsx": "react-jsx",

    "downlevelIteration": true,

    "paths": { // 这个可以让你在import的时候使用@不会报红

        "@/*": [
            "src/*"
        ]
    },
    "types": [
        "node"
        ]
    },
    "include": ["**/*.d.ts","src"],
    "exclude": [
        "./node_modules/*",
        "lib",
        "es"
    ]
}

Step3、配置webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const CopyPlugin = require('copy-webpack-plugin')




const config = {
    entry: {
        App: './src/index.tsx', // webpack 入口文件
    },
    output: {
        path: path.resolve(__dirname, './dist'), // 打包后的输出目录
        filename: '[name].bundle.js', //输出的文件名
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({        
            template: './index.html', // 指定html的模型文件
        }),
        new CopyPlugin({
            patterns: [{ from: 'public', to: './' }], // 移动public文件夹下的所有资源到output目录下
        }),
    ],
    module: {
        rules: [
                    {
                        test: /\.(ts|tsx)$/,
                        exclude: /node_modules/,
                        include: [path.resolve('./src')],
                        use: {
                            loader: 'ts-loader',
                            },
                    }, // .ts 和.tsx文件 使用ts-loader
                    {
                        test: /\.(png|jpe?g|gif|gltf|glb)(\?.*)?$/,
        
                        use: [

                                {
                                    loader: 'url-loader',

                        options: {

                                limit: 10000,

                                },
                            },
                        ],
                    }, // png jpg gif 模型等文件 使用url-loader

                    {
                        test: /\.css$/i,

                        use: ['style-loader', 'css-loader'],

                    }, // .css文件转换成js模块 然后使用style-loader 添加到<style>标签中

                ],
            },
    resolve: {

        alias: {

            '@': path.resolve(__dirname, './src'), // 配置src目录路径的别名

        },
        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],

    },
    devServer: {

        open: true,

        host: 'localhost',

    }, //webpack server 配置

}
module.exports = () => {

    config.mode = 'development'

    return config

}

Step4、添加图片资源到/public/assets
在这里插入图片描述

Step4、修改App.tsx

import React from "react";

const App = ()=>{

    return (

        <div>
            <h1> helloworld </h1>        
            
            <img width={"100px"} src="/assets/React-icon.png"></img>
        </div>
    )
}
export default App;

Step5、修改index.css(全局样式可以在这里设置)

body {

    margin: 0;

    background-color: black !important;

}

Step6、修改index.tsx(主入口文件)

import React from "react";

import ReactDOM from 'react-dom/client'

import App from "./App";

import './index.css'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

root.render(<App/>)

8、配置package.json 中打包和开发服务器的脚本

...
"scripts": {
    "start": "webpack server", // 开发环境
    "build": "webpack" // 打包
},
...

执行

npm start

浏览器中执行http://localhost:8080/ 可看到

在这里插入图片描述