likes
comments
collection
share

一起学习搭建react+webpack+ts框架啊！！！(一)

作者站长头像
站长
· 阅读数 25

React项目框架搭建

相信我，小白一步一步来，也能学会搭框架，重点在于编程思想！！！

一起学习搭建react+webpack+ts框架啊！！！(一)

前言

起初，主要是想较为系统的学习下react，然后就开始断断续续搭建项目框架，过程持续的也比较久，算是一边学习一边实践，然后！！！过了一段时间发现之前学废了的知识点，又抛到脑后了，所以不得不整理下文档了。巨巨巨巨烦写文档！脑壳疼脑壳疼啊

前置项

react：react18 打包工具：webpack5 路由：react-router-dom@6.x UI：antd4.21.7 语言：typescript node: node14 axios、eslint及prettier代码规范配置

目前所用到的库都为当前最新版本

准备重新创建一个新项目一步步重新再次搭建并进行记录！！！ 一起学习搭建react+webpack+ts框架啊！！！(一)

  1. 首先，初始化一个新项目(不采用脚手架啥的)
1.创建一个文件夹 react-demo
2.进行初始化
npm init / yarn init
一路点击回车，自动生成一个package.json文件

一步步试探，白着急哈，缺啥就补啥呗~

  1. 修改package.json
// scripts中添加本地运行命令
scripts: {
  "dev": "webpack"
}
// 执行npm命令运行项目
npm run dev

然后就会发现报错了，识别不了webpack

一起学习搭建react+webpack+ts框架啊！！！(一)

  1. 装webpack相关依赖

接下来，安装下webpack即可 注意：安装依赖时，区分下是devDependencies还是dependencie，保持良好的习惯

npm i webpack -D

继续运行，会报错并提示安装webpack-cli（这里图就不贴啦~）

接着运行，报从配置文件中未找到mode等属性，这时就需要在根目录下创建webpack.config.js开始进行配置啦

一起学习搭建react+webpack+ts框架啊！！！(一)

webpack.config.js基础配置

const path = require('path')
module.exports = {
    mode: "development", // 默认开发环境
    entry: path.resolve(__dirname, './src/index.tsx'), // 入口文件\
    // 打包出口文件
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].[contenthash:8].bundle.js',
        // webpack5支持clean属性配置 不需要再去依赖其他plugin配置
        clean: true, // 清除掉之前的bundle 
    }
}

简单配置一下入口文件index.tsx及出口目录dist即可，运行npm run dev就可以打包了

一起学习搭建react+webpack+ts框架啊！！！(一)

思考一下，怎么才能在浏览器内显示出内容呢？我们是不是要先有一个html文件，然后如果把写的所有代码都挂载到这个html上，这样是不是就满足需求了呀

所有的代码不就是打包后生成的dist/js/下的文件嘛，那我们直接把这个文件通过script标签引入到html文件不就行了吗

// index.tsx
console.log('react项目框架搭建')

// public/index.html
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='../dist/js/main.f8fffaee.bundle.js'></script>
</head>

浏览器打开html文件，运行成功

一起学习搭建react+webpack+ts框架啊！！！(一)

再接再厉！我们不想每次都要手动去引入bundle.js，想要它能正常在本地跑起来并且能将生成的包自动挂载到html上！！！那就需要配置些与webpack-dev-server相关的

  • 先稍微改下package.json中的scripts
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  • 然后就直接运行npm run dev，按照之前的思路跟着报错信息走，安装webpack-dev-server
npm i webpack-dev-server -D
  • npm run dev就能正常跑起来了 默认的端口号是8080
devServer: {
    port: 9090, // 这里端口号可自行定义 默认8080
    hot: true // 本地开发热更新 代码更改后自动重新编译
}
  • 跑是跑起来了，但是啥也看不到啊，接下来就要搞点内容显示了~
    • 创建一个html文件 这里我在根目录下创建了一个public目录，public下创建index.html；
    <body>
    <!-- 用于挂载内容 -->
    <div id="app"></div>
</body>
    • webpack配置，将bundle.js自动挂载到html文件，这就需要安装HtmlWebpackPlugin
    npm i html-webpack-plugin -D
// webpack.config.js
    • webpack.config.js
    const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [
        // 将bundle.js自动挂载到index.html
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html'), // 要挂载的模板文件
            filename: 'index.html',
        })
    ]
}

    • 接着直接本地运行，打印语句正常输出，说明配置正常，可以自动将bundle.js挂载到html上了（404错误不为理会，只是没有提供ico图标而已~）

      一起学习搭建react+webpack+ts框架啊！！！(一)

  1. 接下来 要考虑ts的相关配置了 一起学习搭建react+webpack+ts框架啊！！！(一) 随便写一个ts的语法，就会发现报错，原因是未安装typescript,且未提供对应的loader去处理此类型文件
npm i typescript -D
npm i ts-loader -D // 后续会换成功能更强的babel去做解析处理

然后配置下.tsx的解析规则，让它使用ts-loader去处理

// webpack.config.js
module: {
  rules: [
      {
          test: /\.(tsx?|js)$/,
          use: 'ts-loader',
          include: /src/, 
      }
  ]
},

继续运行，提示需创建tsconfig.json文件

一起学习搭建react+webpack+ts框架啊！！！(一) 根据提示在根目录下创建tsconfig.json

{
    "compilerOptions": {
        "jsx": "react", // 在.tsx文件中支持jsx
        "target": "es6",
        "rootDir": "./src",
        "outDir": "./dist",
        "module": "ESNext",
        "sourceMap": true,
        "strictNullChecks": true,
        "declaration": true, // 生成相应的.d.ts文件
        "allowJs": true,
        "checkJs": true,
        "moduleResolution": "Node", // 将模块解析模式设置为node.js解析模式
        "allowSyntheticDefaultImports": true // 允许对不包含默认导出的模块使用默认导出
    },
    "include": ["./src/**/*"],
    // 不进行类型检查的文件
    "exclude": ["node_modules", "dist"]
}

这样，就能正常解析ts文件啦~

  1. 接下来就进行react相关配置

    • 安装react相关
    npm i -D react react-dom @types/react @types/react-dom

    安装完之后，修改下入口文件index.tsx测试下~

    import { createRoot } from 'react-dom/client'
import * as React from 'react'

const container = document.getElementById('app')
const root = createRoot(container as Element)

root.render(
    <div>欢迎来到react!</div>
)

    效果如下：

    一起学习搭建react+webpack+ts框架啊！！！(一)

  2. 配置css样式相关

    // webpack.config.js
rules: [
    {
        test: /\.css$/,
        include: [/node_modules/],
        // css-loader对css文件进行合并处理等 
        // style-loader用于处理的css文件以style标签的形式嵌入到html页面中
        use: ['style-loader', 'css-loader'],
    },
]

    如果我们采用style-loader将样式直接嵌入到html中，如果存在大量的css文件，这种方式就会导致html页面特别臃肿也会比较杂乱，也不易于生产环境调试等

    可以采用MiniCssExtractPlugin插件，拆分css并以外联的方式将css文件引入到html中(本地环境用style-loader也可)，本身这只是一个优化项~

    // 安装MiniCssExtractPlugin插件
// webpack.config.js改一下loader即可
{
    test: /\.css$/,
    include: [/node_modules/],
    // css-loader对css文件进行合并处理等 
    // style-loader用于处理的css文件以style标签的形式嵌入到html页面中
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
}
// 同时在plugin中添加MiniCssExtractPlugin配置
plugins: [
    new MiniCssExtractPlugin({
        filename: 'css/[name].css', // filename打包的是同步代码
        chunkFilename: '[id].css', // 异步代码
    }),
],
// 不使用style-loader的话，可以顺手uninstall一下

    创建一个global.css 测试下~

    一起学习搭建react+webpack+ts框架啊！！！(一)

待续~

  • 完成以上步骤，一个小的react项目框架就搭建完成了
  • 后续会进行css模块化、react-router、antd、axios二次封装、以及eslint、prettier代码规范配置等

相关链接： 一起学习搭建react+webpack+ts框架啊！！！(二) github代码地址