寫在前面

準備學習一下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的相關依賴，有