分享9：webpack脚手架搭建

前言：

就职于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 = (





);

效果：