分享9：webpack脚手架搭建

一时失言乱红尘 2023-06-19 11:22 7阅读 0赞

# **前言**： #

就职于weaver一年多来，以一名java开发入职，却大部分时间在做着前端开发，包括了客户二次需求，新功能扩展，公司某些新功能研发以及个人学习方向，发现自己大部分时间做着前端相关开发。突然发现我还没有搭建过一个webpack+react+mobx+router的脚手架，于是开启下面的脚手架搭建之路。  
项目源码：  
**链接：[https://pan.baidu.com/s/1YKE-FIQqDrHHXTKQwnIJHA][https_pan.baidu.com_s_1YKE-FIQqDrHHXTKQwnIJHA]  
提取码：mj71  
下载项目后  
第一步：yarn install,  
第二步：yarn start --buildModule=mark/test(两个模块任选一个,默认访问端口3000【可修改webpack.config.js】)**  
[webpack脚手架搭建【问题汇总】][webpack]

# **搭建：** #

## 准备： ##

### 1.下载node.js（[http://nodejs.cn/][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 = (  
  
  
  
  
  
);

效果：  
![在这里插入图片描述][20191206151727709.gif]

[https_pan.baidu.com_s_1YKE-FIQqDrHHXTKQwnIJHA]: https://pan.baidu.com/s/1YKE-FIQqDrHHXTKQwnIJHA
[webpack]: https://blog.csdn.net/ljcc122/article/details/103424381
[http_nodejs.cn]: http://nodejs.cn/
[20191206151727709.gif]: https://img-blog.csdnimg.cn/20191206151727709.gif