使用ts+webpack5手把手搭建一个react的环境

前言

写这篇博客的首要目的是为了让我自己能更好的掌握住webpack，同时了解脚手架的一个大概原理的一个出发点进行编写的。

准备工作

1. 包管理工具(yarn或者npm，我使用yarn)
2. 一个编辑器(我这边使用vscode)
3. webpack，webpack-cli，webpack-dev-server
4. react，react-dom，@types/react，@types/react-dom
5. typescript

目录

1. 环境配置
2. webpack配置
3. react配置
4. webpack-dev-server配置
5. 番外

环境配置

初始化node.js环境
我全程将会使用yarn

初始化node.js环境：yarn init -y
然后安装typescript环境
我这边就使用npm来全局安装type环境了npm i -g typescript

然后检查一下环境是不是加载完毕了tsc -v
弹出版本号就是安装成功了
接下来就是初始化typescript的环境tsc --init

经过这两布之后你会发现你的目录里面多了两个文件

这就是type环境和node环境初始化完毕之后生成的两个文件
接下来就是重头戏了，我们要配置webpack的环境
首先使用npm全局安装webpack和webpack-cli
命令为npm i -g webpack webpack-cli

安装完毕之后，输入命令webpack -v
弹出版本号就是安装成功了
此处用的是webpack5

然后在目录里面新建一个文件

文件名为: webpack.config.js
到这里，我们就搞好最基本的东西了
下面我们将会围绕这三个配置文件进行操作

webpack配置

先使用yarn装一下运行环境的依赖
yarn add webpack webpack-cli webpack-dev-server

装好依赖后我们在webpack.config.js暴露一个出口给webpack进行使用
我们在webpack.config.js里头编写

module.exports = {
  // 接下来我们的webpack配置将在里面进行编写
}

既然是配置，那我们就要从入口开始定
webpack的入口配置项叫做entry
我们在文件夹里面新建一个index.js文件
现在先从js文件下手，等下再改成ts文件
我们把配置项写成这样子

module.exports = {
  // 入口配置项
  entry: './index.js'
}

这就已经配置好了入口，那我们要配置一下webpack打包后文件的出口
webpack的出口配置项叫做output
我们要在根目录中自动生成一个dist文件夹，然后里面存好我们打包好的文件
我们把配置项写成这样子

//我在这边引入了这个依赖，只是用来操作点前目录地址的
const path = require('path')

module.exports = {
  mode: 'development',
  // 入口配置项
  entry: './index.js',
  // 出口配置项
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  }
}

接下来我们就直接在命令行中运行：webpack

诶报错了呢。报错原因是因为我们没有在配置项里面指定好我们的模式
指定webpack模式的配置项叫做mode，我们有两个参数选择
'development' 或者 'production'
由于我们是开发环境，所以我们选择development
那我们就在配置文件里面写上这个配置项
mode: 'development'
然后再执行webpack
诶，这样就不会报错了吧，然后你会注意到你的文件夹目录下多了一个dist文件

这时你可能好奇，诶我们要这个有什么用？？？
你试着在你的index.js中写个输出，然后打包一下再进行对比

你会发现你的代码被打包成这样子
然后你可以直接运行你的代码

这就是一个最基本的打包配置
接下来将会开始起飞
我们来配置ts和tsx的环境
我们把入口文件index.js改成index.ts
然后运行webpack
然后你会发现打包通过


并且也能成功的执行
这是因为webpack在打包的时候，会顺便帮你把ts转换成js
最基本的一个ts环境就打好啦，但是我们还需要配置一些东西
我们手动的去写一个模块然后暴露一个方法给入口函数
我把模块文件放到了src文件夹的module文件夹里面

然后在入口处引入这个文件并且去执行他
哦吼报错了

这是因为我们没有指定好模块的解析方式，所以接下来我们需要去webpack的配置文件里面进行指定
由于我们要指定的是ts和js的文件
我们要用到的选项为：resolve
这个在官方文档写的挺详细的
官方文档的resolve
然后我们需要跟着官方文档使用这个东西resolve.extensions

那我们就这样子写

const path = require('path')

module.exports = {
  mode: 'development',
  // 入口配置项
  entry: './index.ts',
  // 出口配置项
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  resolve: {
    extensions: ['.ts', '.js'] // 注意有个点，别看走眼
  }
}

然后我们再执行webpack
打包通过
我们运行一下编译出来的那个js

诶成功运行嘞，那我们的ts配置算好了一大半嘞
接下来。我们就来配置react嘞
在配置之前，我们需要配一下tsx文件的处理
先把我们的入口.ts文件改成.tsx文件

在resolve里面增加对tsx文件的解析支持，再把入口改一下
然后，最重要的一点就是，在tsconfig.json里面增加对tsx文件的支持
"jsx": "react"

弄好之后，我们直接运行webpack去打包，会报错，原因是因为我们没有配置好webpack的一个配置
这个配置叫module，顾名思义就是模块的意思，这个模块会对你指定的一些格式的文件进行额外的操作
比如tsx，他会使用一个叫ts-loader的东西对tsx文件进行操作，把这个tsx转到js
我们就是要处理tsx文件，那我们就装一下这个ts-loader
我使用的是yarn
yarn add ts-loader

然后在webpack的配置文件改成这样子

const path = require('path')

module.exports = {
  mode: 'development',
  // 入口配置项
  entry: './index.tsx',
  // 出口配置项
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  // 添加模块依赖
  module: {
    rules: [
      { test: /\.tsx$/, use: ['ts-loader'] }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  }
}

接下来我们就可以直接进行打包啦

打包成功啦
然后，在配置react前，还得再做一步
就是要集成一个html文件进去，不然我们效果去哪里看呢？？？
我们先在根目录里建一个文件夹，我把这个文件夹叫做public，用于放置我们这个用于展示出react效果的html模板给放在里面

接下来我们就要使用webpack的另一个配置，就是plugins
然后我们要使用到一个东西叫做html-webpack-plugin
我们老样子先去安装这玩意
yarn add html-webpack-plugin
然后就把webpack的配置文件改成这样子

const path = require('path')
// 在webpack配置文件中引入
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  // 入口配置项
  entry: './index.tsx',
  // 出口配置项
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  // 添加模块依赖
  module: {
    rules: [
      { test: /\.tsx$/, use: ['ts-loader'] }
    ]
  },
  // 添加插件支持，注意plugins是一个数组
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    })
  ],
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  }
}

然后我们进行打包
你会发现打包完毕之后你的打包文件里面会多了个html文件

接下来我们的react将会对这个html文件进行操作

react配置

这个配置就比较简单啦
老样子，先装依赖
yarn add react react-dom @types/react @types/react-dom

然后，我们在我们的入口文件里面进行引入，并且编写代码

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello React</h1>,
  document.getElementById('app')
)

然后使用webpack打包之后直接打开那个html文件进行查看


我们成功啦，我们已经实现了最基本的一个react的一个环境
但是，我们每次写一遍就得打包一边，那不是很烦？？
接下来将会教你配置一个每个脚手架都带有的一个东西
自动热更新代码webpack-dev-server

webpack-dev-server配置

使用这个东西还是比较简单的
需要在webpack配置文件里面使用配置：devServer
我们需要小改动一下package.json这个配置文件，
在里面加入以下代码

"scripts": {
    "dev": "webpack-dev-server"
  }

然后保存
然后命令行输入命令：yarn run dev

这个东西你如果没配置的话，它默认会给你配置好，你暂时可以不管他
你直接就进去它给你的地址，然后你每次改动代码，里面都会自动进行热更新


吼吼，我们已经实现了一个最基本的东西

番外

配置别名路径
再ts的配置文件里面加入

"paths": {
      "@/*": ["./src/*"]
    }

然后再在webpack配置文件的resolve项里面加入

alias: {
      '@': './src'
    }

然后就能在任何目录里面使用@符号进行某个指定路径的访问啦

呼呼，这篇博客到此结束啦，谢谢大家的观看，这篇博客还有很多的拓展呢，比如css啥的的支持，你们都可以自行去拓展学习，我这篇主要是给自己看的，分享出来自己的学习收获。共同进步
路过的可以点个免费的赞吗