使用ts+webpack5一步一步搭建一个最简单react的环境

使用ts+webpack5一步一步搭建一个最简单react的环境

开始之前

在开始之前，你需要了解以下基础知识：

• 电脑上需要安装Node.js
• 包管理工具(npm或yarn)
• VS Code编辑器
• 了解webpack，webpack-cli，webpack-dev-server
• 了解react，react-dom，@types/react，@types/react-dom
• 了解typescript

环境配置

1. 初始化node环境，这里用的是yarn
   yarn init -y
   
2. 安装typescript环境。这里用npm全局安装typescript环境。
   npm i typescript -g
   

• 检查一下是否安装成功 ,我们用tsc -v检查typescript的版本号
  
  弹出版本号说明安装成功了

3. 初始化typescript环境 tsc --init
   
   此时你会发现，文件中多了两个熟悉的文件
   
4. 配置webpack环境

• 首先使用npm安装webpack和webpack-cli
  npm i webpack webpack-cli
  
• 安装完毕之后，输入命令webpack -v
  弹出版本号就是安装成功了
  此处用的是webpack5
  

5. 在项目根目录下创建一个webpack.config.js文件，这是webpack的配置文件
   

Webpack 配置

1. yarn装一下运行环境的依赖
   yarn add webpack webpack-cli webpack-dev-server
2. 配置webpack.config.js文件，在它里面暴露一个出口给webpack使用

module.exports ={
}

• 添加webapck 入口项配置
  我们在文件夹里面新建一个index.js文件，为了好理解，现在先从js文件下手，等下再改成ts文件

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

• 添加webpack的出口配置项
  我们要在根目录中自动生成一个build文件夹，然后里面存好我们打包好的文件，直接执行webpack
  
  如果我们没有设置打包模式，webpack在打包时会出现错误。webpack模式的配置项叫做mode，我们有两个参数选择’development’ 或者 ‘production’，由于我们是开发环境，所以我们选择development

//获取当前的目录
//获取当前的目录
const {resolve} = require('path');

module.exports ={
    //入口配置项
    entry:'./index.js',
    //出口项配置
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
     //设置为开发环境
    mode:'development',
}

再次执行webpack

会注意到文件夹目录下多了一个build文件夹，里面多了一个built.js文件，这里就是我们打包入口文件后的文件。我们给入口文件里面加句console.log('webpack demo') 再次打包。

我们发现index.js中的内容已经被我们打包到built.js中了
我们可以直接运行built.js，发现和运行index.js的结果是一样的

到这里，就是普通的入口文件为js文件的打包，下面我们将入口文件换成ts文件，然后再次执行webpack ,我们会发现也打包成功了。同样能够打包后的built.js也能够执行成功


这是因为webpack在打包的时候，会顺便帮你把ts转换成js。最基本的一个ts环境就打包好了，但是我们还需要配置一些东西。

我们手动的去写一个模块然后暴露一个方法给入口函数，我把模块文件放到了src文件夹的module文件夹里面


之后我们如果直接再进行打包，会出现错误，这是因为我们没有指定好模块的解析方式，所以接下来我们需要去webpack的配置文件里面进行指定。由于我们要指定的是ts和js的文件，我们要用到的选项为：resolve。这个在官方文档写的挺详细的，官网文档

然后我们需要跟着官方文档使用这个东西resolve.extensions

之后我们的webpack.config.js文件要这样写：

//获取当前的目录
const {resolve} = require('path');

module.exports ={
    //入口配置项
    entry:'./index.ts',
    //出口项配置
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    resolve:{
        extensions:['.ts','.js']
    },
    //设置为开发环境
    mode:'development',
}

然后我们再执行webpack，这次打包通过

我们运行一下打包后的built.js文件，发现也能执行成功。能够成功打包ts文件后，我们接下来配置react的打包环境

3. 配置react的打包环境

• 在配置之前，我们需要配一下tsx文件的处理，先把我们的入口.ts文件改成.tsx文件。
  

• 在resolve里面增加对tsx文件的解析支持，再把入口改一下。
  

• 然后，最重要的一点就是，在tsconfig.json里面增加对tsx文件的支持"jsx": "react"
  
  这里我们如果直接打包的话，会报错。这时module就该登场了。原因是因为我们没有配置好webpack的一个配置，这个配置叫module，顾名思义就是模块的意思，这个模块会对你指定的一些格式的文件进行额外的操作，因为浏览器只能识别js文件。比如tsx，他会使用一个叫ts-loader的东西对tsx文件进行操作，把这个tsx转到js，我们就是要处理tsx文件，那我们就装一下这个ts-loader，运行命令 yarn add ts-loader

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

//获取当前的目录
const {resolve} = require('path');

module.exports ={
    //入口配置项
    entry:'./index.tsx',
    //出口项配置
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {test:/\.tsx$/,use:['ts-loader']}
        ]
    },
    resolve:{
        extensions:['.ts','.tsx','.js']
    },
    //设置为开发环境
    mode:'development',
}

• 接下来我们就可以直接进行打包，发现打包成功。

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

• 接下来我们就要使用webpack的另一个配置，就是plugins。然后我们要使用到一个东西叫做html-webpack-plugin。输入命令yarn add html-webpack-plugin
  然后就把webpack的配置文件改成这样子

//获取当前的目录
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve} = require('path');

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

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

react配置

1. 先装依赖 yarn add react react-dom @types/react @types/react-dom
2. 然后，我们在我们的入口文件(根目录下的index.tsx)里面进行引入，并且编写代码

import React from 'react'
import ReactDom from 'react-dom'

ReactDom.render(
     //这里react脚手架中引入的时app.js组件，这里直接写死了
    <h1>Hello React</h1>,
    document.getElementById("root")
)

3. 再次进行打包。然后直接运行打包后的index.html，结果如下：
   

webpack-dev-server配置

自动热更新代码webpack-dev-server

1. 首先webpack.config.js文件中的变化如下(最后)：

//获取当前的目录
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {resolve} = require('path');

module.exports ={
    //入口配置项
    entry:'./index.tsx',
    //出口项配置
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    //添加模块依赖
    module:{
        rules:[
            {test:/\.tsx$/,use:['ts-loader']}
        ]
    },
    //添加插件支持，注意plugins是一个数组
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            filename:'index.html'
        })
    ],
    resolve:{
        extensions:['.ts','.tsx','.js']
    },
    //设置为开发环境
    mode:'development',
    //配置webpack-dev-server
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    }
}

2. 在package.json中添加

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

3. 保存后运行命令：yarn run dev

到这里，我们就实现了最最基本的脚手架的配置，但是由于正常项目中有很多文件，我们需要对webpack的module了解很多，利用其不同的loader去打包其他类型的文件，这里就不作过多介绍。