手动搭建webpack4.X React项目脚手架

记录一次自己搭建webpack4.43.0 React项目脚手架的过程

之前在网上跟着一位老师搭建过一次，不过只是跟着老师敲了一下，并没有理解每一步为什么要这么做，后面有一段时间没有练习就忘了，想重新写一个webpack打包的react项目的时候，自己又重新搭了一次，过程过踩了一些坑，写篇博客记录一下

由于速度原因，整个脚手架均使用cnpm安装

一、整体的流程

文件夹初始化

首先新建文件夹，后初始化项目文件夹，自动创建出一个包管理配置文件package.json，之后我们安装的相关的包都会在这个配置文件中声明

npm init -y

webpack安装包依赖

之后安装webpack以及webpack-cli

cnpm install webpack webpack-cli -D

这里我们使用-D参数是因为webpack只用于开发环境（将我们的项目打包），而之后的react和react-dom就不能使用-D参数了

这是package.json的devDependencies（开发依赖环境）应该是这样的

"devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
}

我们新建webpack需要的文件夹以及文件

然后我们新建webpack.config.js文件，这里添加一些基本的配置

const path = require('path');

module.exports = {
    output: {
    	path: path.join(__dirname, 'dist'), // 输出的文件夹路径
        filename: 'main.js' // 输入的名称
    },
    mode: 'development' //必须的参数
}

因为在webpack4.x中规定默认大于配置, 打包默认的入口文件为src文件夹下index.js文件, 所以我们就不用写入口文件配置了

到这里我们实现了使用webpack命令可以将以src/index.js为入口文件打包生成一个main.js输出到dist文件夹中

react环境配置

首先我们安装相应的react和react-dom依赖包

cnpm install react react-dom -S

在这里使用了-S参数安装，因为这两个依赖我们在运行环境中需要用到，我后面就是因为在这里参数使用错误导致出现createElement undefine错误

安装完成后package.json会多出新的依赖dependencies

"dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
}

注意， 这里的为依赖， 上面安装的webpack为开发依赖

然后我们就可以在js文件中引入react了

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

ReactDOM.render(
	React.createElement('div', 
                       	null,
                       	'这是React动态创建的内容')，
    document.getElementById('root')

)

但是如果让我们用上面这种方式写react代码， 那我估计程序员们都要疯了，所以引入了一种新的语法jsx

JSX

我们可以在jsx中写出了类似html的代码，但是目前主流的浏览器内核都不能解析jsx代码，所以我们需要安装一些babel来将jsx代码转为浏览器可以识别的代码

首先安装loader

cnpm install babel-loader -D

其次安装下面这些包

@babel/core、@babel/preset-env、@babel/runtime、@babel/plugin-transform-runtime、@babel/plugin-proposal-class-properties、@babel/preset-react

安装完成后package.json文件

"devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@babel/runtime": "^7.10.2",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "install": "^0.13.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },`

装完后我们需要在webpack.config.js中的module的rules添加loader

{
    test: /\.js|jsx$/,
	use: 'babel-loader',
	exclude: /node_modules/
}

之后我们新建.babelrc文件，指定我们的babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"],
    "plugins":["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

到此整个脚手架就已经搭建完了

二、遇到的问题

版本问题

babel-loader与对应的babel版本需要对应，否则会报错，具体对应的版本如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fdGkMvDf-1592578133424)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\1592577871693.png)]

这是相应的介绍的博客

安装参数

第一次在安装react以及react-dom的时候使用了参数-D, 装到了开发依赖里面，导致每次打包后报错,

React.createElement not defined

即就是打包后并没有打包react和react-dom包，导致使用了未定义的函数