前言：
就職於weaver一年多來，以一名java開發入職，卻大部分時間在做着前端開發，包括了客戶二次需求，新功能擴展，公司某些新功能研發以及個人學習方向，發現自己大部分時間做着前端相關開發。突然發現我還沒有搭建過一個webpack+react+mobx+router的腳手架，於是開啓下面的腳手架搭建之路。
項目源碼：
鏈接：https://pan.baidu.com/s/1YKE-FIQqDrHHXTKQwnIJHA
提取碼：mj71
下載項目後
第一步：yarn install,
第二步：yarn start --buildModule=mark/test(兩個模塊任選一個,默認訪問端口3000【可修改webpack.config.js】)
webpack腳手架搭建【問題彙總】
搭建：
準備：
1.下載node.js（http://nodejs.cn/我這裏下載了12.13.1）
2.安裝yarn命令
2.1 npm install yarn -g
2.2 切換源（類似java下載jar的位置）【淘寶源，網易源等等】
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
3.初始化一個項目
3.1自己手動搭建項目
yarn init -y 初始化一個項目
下載各種依賴js
核心有babel[用戶jsx編譯]， webpack， mobx, react,xxx-loader
- **奉上我的依賴【package.js】**
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.8.5",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"history": "^4.10.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.10.1",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"mobx-react-router": "^4.0.7",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"react-router": "3",
"react-router-dom": "^5.1.2",
"style-loader": "^1.0.0",
"typescript": "^3.5.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.1.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"mobx": "^5.13.0",
"mobx-react": "^6.1.3",
"react": "^16.9.0",
"react-dom": "^16.9.0"
},
3.2依賴別人的腳手架、
yarn install
4 配置路由、mobx
通過provider共享stores[這裏建議學習一下redux]
<Provider {…stores}> xxx
路由：
const Routes = (
);
效果：
