从零开始学习搭建React脚手架项目

写在前面

准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多

react和vue,angular一样也有脚手架。这大大方便了我们的开发。react的脚手架是create-react-app。

脚手架下载

使用npm下载create-react-app运行如下命令：

npm install -g create-react-app

国内npm一般下载比较慢或者是常出现下载失败的情况，我们可以指定下载的仓库：

npm install -g create-react-app --registry https://registry.npm.taobao.org

或者直接设置npm的默认仓库：

npm config set registry https://registry.npm.taobao.org 

第一步，依赖总览

完成到我现在半成品的过程中，目前完成开发模式的相关操作，添加了babel,less,antd按需加载的地步。总体的package.json情况如下：

    {      "name": "myreact",      "version": "1.0.0",      "description": "test react",      "main": "index.js",      "scripts": {        "test": "echo /"Error: no test specified/" && exit 1",        "dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"      },      "keywords": [        "test",        "react"      ],      "author": "xxxx",      "license": "ISC",      "devDependencies": {        "autoprefixer": "^9.1.2",        "babel-core": "^6.26.3",        "babel-loader": "^7.1.5",        "babel-plugin-import": "^1.8.0",        "babel-preset-es2015": "^6.24.1",        "babel-preset-react": "^6.24.1",        "babel-preset-stage-0": "^6.24.1",        "css-loader": "^1.0.0",        "html-webpack-plugin": "^3.2.0",        "less": "^3.8.1",        "less-loader": "^4.1.0",        "postcss-import": "^12.0.0",        "postcss-loader": "^3.0.0",        "react-hot-loader": "^4.3.4",        "style-loader": "^0.22.1",        "webpack": "^4.16.5",        "webpack-cli": "^3.1.0",        "webpack-dev-server": "^3.1.5"      },      "dependencies": {        "antd": "^3.8.2",        "react": "^16.4.2",        "react-dom": "^16.4.2",        "react-router-dom": "^4.3.1"      }    }

暂时做到这些依赖，需要指出的是，webpack4和以前的版本可能有差别（不一定，或许是我没有注意到）如果需要在scrpit属性中配置，使用cli的方式运行，就需要安装webpack-cli，需要行内命令行的方式运行，就需要安装webpack-command,当然，一起安装应该也没有什么问题。这里是和教程里面配置的不一样的地方。

然后，webpack4需要指明模式production|development，所以我在dev中使用了--mode development这个参数。这也是教程中没有提到的部分。

关于babel配置

babel的相关依赖，有