構建React項目的幾種方式：
- 構建：create-react-app 快速腳手架
- 構建：generator-react-webpack
- 構建：webpack一步一步構建
這裏我們create-react-app 快速腳手架構建項目。
優缺點：React項目構建的幾種方式
一、安裝
1、安裝cnpm
國內使用 npm 速度很慢，你可以使用淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
$ sudo npm config set registry https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模塊了：
$ cnpm install [name]
2、安裝react
使用 create-react-app 快速構建 React 開發環境
create-react-app 是來自於 Facebook，通過該命令我們無需配置就能快速構建 React 開發環境。
create-react-app 自動創建的項目是基於 Webpack + ES6 。
執行以下命令創建項目my-app，並啓動：
//創建項目
$ sudo cnpm install -g create-react-app
$ sudo create-react-app my-app
//啓動項目
$ cd my-app/
$ sudo npm start
然後在瀏覽器中打開 http://localhost:3000/ ，即可。
現在很多人也用一個新的包管理工具yarn，來安裝。
這裏把npm和yarn做下對比：
//安裝模塊
> npm install lodash
> cnpm install lodash
> yarn add lodash
//啓動項目
> npm start
> cnpm start
> yarn start
//構建項目
> npm run bulid
> cnpm run bulid
> yarn build
二、目錄結構
- node_modules： 該文件夾是項目
所有依賴包的存放地址，除了在項目初始化時安裝的所必須的依賴包之外，我們後續通過yarn/npm安裝的包都存放在該目錄下。 - package.json：項目的
配置文件 - public：裏面的index.html爲
項目的入口文件 - src：
模塊與組件的存放目錄。裏面包含了我們使用的js文件，css文件，img文件等等。其中src裏的index.js是項目的js入口文件，它與public文件夾裏的index.html相對應。
注：若用yarn安裝，會有yarn.lock文件，它是依賴包的描述文件。
三、webpack
（1）webpack編譯打包項目
> npm run build
（2）webpack配置文件
腳手架雖然封裝了webpack，但默認配置文件是不開放的。
所以現在生成webpack的配置文件：
> npm run eject