開(kāi)發(fā)環(huán)境
Windows 10,node v8.9.4,npm 5.6.0,WebStorm 2017.3.2
創(chuàng)建項(xiàng)目
- 創(chuàng)建項(xiàng)目文件夾myreact
- 控制臺(tái)打開(kāi)項(xiàng)目文件夾流炕，生成package.json仅胞。生成命令：
npm init -y
- 安裝react依賴包，還是在項(xiàng)目文件夾下渠欺。安裝命令：
npm install --save react react-dom
- 安裝webpack椎眯，babel依賴包挠将。安裝命令：
npm install --save-dev webpack webpack-dev-server webpack-merge babel-cli babel-preset-env babel-preset-react babel-preset-react-hmre babel-loader
npm安裝命令--save與--save-dev的區(qū)別舔稀，點(diǎn)這里。
package.json的內(nèi)容
{
"name": "myreact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.10.1",
"webpack-merge": "^4.1.1"
}
}
- 搭建目錄結(jié)構(gòu)
myreact
--app 主目錄
--component react組件目錄
--index 首頁(yè)目錄
--public 公共目錄 主要放 js css img
--js 公共js文件
--build webpack 打包輸出目錄
--config 打包配置目錄
--webpack webpack配置目錄
--entryBuild webpack 打包入口文件目錄
目錄結(jié)構(gòu)
