脱离脚手架0-1搭建react项目

公司的项目太多了有小半年没有写博客了。今天准备更新这篇干货。
背景：这段时间经历了公司，项目的洗礼让我对于项目的自主搭建有了更深刻的认识。当我们使用别人的东西开始就注定要受制于人，例如create-react-app这样的脚手架一切的东西都帮你配置好了。当你遇到想要自定义端口、打包路径、入口文件、或者引入新的wenpack插件的时候，这个时候你就需要在脚手架的基础上执行npm run eject来开启该脚手架的自定义功能；这个时候如果你已经开发到了一半那么这样的操作可能会给你带来意想不到的麻烦，当然虽然有提供react-app-rewired这样的插件来满足自定义的需求但是这同样要遵循别人的规则。

分析：create-react-app是基于react-scripts搭建的脚手架，通过react-scripts实现项目的运行和打包，继续探索react-scripts发现本质上还是依赖于webpack来实现的。经过上面的分析，跳过create-scripts直接使用webpack接下来我们一步一步来实现。

下面是是一些要用到的文档
webpack：https://webpack.js.org/
babel：https://www.babeljs.cn/
typescripts：https://www.tslang.cn/index.html

先看看项目目录

package.json
运行项目使用webpack-dev-server，打包使用webpack命令

{
  "name": "0-1react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js",
    "build": "webpack --config ./webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.