一起学习搭建react+webpack+ts框架啊!!!(一)
React项目框架搭建
相信我,小白一步一步来,也能学会搭框架,重点在于编程思想!!!
前言
起初,主要是想较为系统的学习下react
,然后就开始断断续续搭建项目框架,过程持续的也比较久,算是一边学习一边实践,然后!!!过了一段时间发现之前学废了的知识点,又抛到脑后了,所以不得不整理下文档了。巨巨巨巨烦写文档!脑壳疼脑壳疼啊
前置项
react:react18
打包工具:webpack5
路由:react-router-dom@6.x
UI:antd4.21.7
语言:typescript
node: node14
axios
、eslint
及prettier
代码规范配置
目前所用到的库都为当前最新版本
准备重新创建一个新项目一步步重新再次搭建并进行记录!!!
- 首先,初始化一个新项目(不采用脚手架啥的)
1.创建一个文件夹 react-demo
2.进行初始化
npm init / yarn init
一路点击回车,自动生成一个package.json文件
一步步试探,白着急哈,缺啥就补啥呗~
- 修改package.json
// scripts中添加本地运行命令
scripts: {
"dev": "webpack"
}
// 执行npm命令运行项目
npm run dev
然后就会发现报错了,识别不了webpack
- 装webpack相关依赖
接下来,安装下webpack
即可
注意:安装依赖时,区分下是devDependencies
还是dependencie
,保持良好的习惯
npm i webpack -D
继续运行,会报错并提示安装webpack-cli
(这里图就不贴啦~)
接着运行,报从配置文件中未找到mode
等属性,这时就需要在根目录下创建webpack.config.js
开始进行配置啦
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
就可以打包了
思考一下,怎么才能在浏览器内显示出内容呢?我们是不是要先有一个
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文件,运行成功
再接再厉!我们不想每次都要手动去引入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图标而已~)
- 创建一个
- 接下来 要考虑
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
文件
根据提示在根目录下创建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
文件啦~
-
接下来就进行
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> )
效果如下:
-
配置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项目框架就搭建完成了
- 后续会进行css模块化、react-router、antd、axios二次封装、以及eslint、prettier代码规范配置等
转载自:https://juejin.cn/post/7128338634201104415