从零开始构建React+TypeScript+Antd+Less(less module)环境（一）

用 React 官方提供的 create-react-app 命令可以快速创建本地 React 开发环境，但是对于一些个性化开发需求比如 less 以 module 方式引入则需 eject 既已封装好的脚手架并“知其然不知其所以然”的按照网上提供的一些技巧修改源代码。这感觉很不爽，总有一种并不通透的感觉。

React 官网提供的了一些三方文档用于自行搭建 React 环境，翻阅后，我去掉了使用 webpack-dev-server 的部分，而改使用 Webpack 的两个中间件  webpack-dev-middleware 和 webpack-hot-middleware 配以 Exrepss 在本地打架开发服务环境。

这样做的目的就是让每一个配置不会因为各个功能包的版本兼容性而产生各种各样奇怪的报错。一切可控是目的，毕竟每当在终端中爆出一大堆 error 的时候是一件让人很崩溃的事儿。

截止到本文编写，目前对于各种依赖包的版本使用均为最新稳定版本：

  ...

  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.23.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.4.2",
    "react-router-dom": "^6.4.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.18.6",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.6",
    "@types/webpack-env": "^1.18.0",
    "@typescript-eslint/eslint-plugin": "^5.40.1",
    "@typescript-eslint/parser": "^5.40.1",
    "babel-loader": "^8.2.5",
    "body-parser": "^1.20.1",
    "css-loader": &#