什么是create-react-app

create-react-app是一個js庫，使用它能夠很方便地建立react項目，免去了建立react項目時配置webpack、調試服務器、運行腳本等麻煩，你只需要使用這個庫，便可以一鍵完成react項目的創建初始化項目

首先，要先利用create-react-app創建一個react項目，可參考https://github.com/facebookincubator/create-react-app

注：用“[ ]”包裹的都是可自定義的內容，例如：cd [project-name]，實際上可能是cd my-app，也可能是cd my-project。總之“[ ]”包裹的內容，只表示上下文里相互對應的變量。

npm install -g create-react-app  create-react-app [project-name] cd [project-name] 

運行完以上命令就已經處在新建的項目中了，此時運行npm run start和npm run build了。但是，默認所有配置是隱藏起來的，要想自定義配置，需要運行一個命令：

npm run eject 

此時會提示，該命令不可逆，是否繼續，輸入y，這樣所有配置項就都出來了。這時候也可以做一些定制化的配置了，比如：

修改build后的output位置

js / css / img等靜態資源會默認輸出到 build -> static 下面，其配置項在config -> webpack.config.prod.js 里。

js在output屬性里，大約第60行 ； css在開頭的cssFilename變量聲明，大約第38行； 圖片等在module -> rules的loader配置里，大約第143行；

map文件由devtool屬性控制，如果不想要map，注釋掉就可以，大約第57行；

manifest.json在ManifestPlugin的配置里，大約294行；

基礎模板在HtmlWebpackPlugin的配置里，不過可以看到，是引的  ‘./paths.js' 文件，所以要修改 config -> paths.js 里面的 appHtml 屬性；

默認在build時會清空build目錄，配置項是scripts -> build.js 里的 fs.emptyDirSync(paths.appBuild); 這一句，注釋掉就不會把老文件刪掉了（灰度發布的時候可能會用到）；

不eject其他修改配置的方法

除了 npm run eject 暴露出所有配置文件外，還有其他辦法修改配置，由于本文主題原因不做展開，僅給出相關鏈。

一個（部分人認為）比較優雅的方法，即引入 react-app-rewired 插件來實現配置覆蓋。需要在根目錄新建一個 config-overrides.js 文件，想配置啥就寫啥（怎么又多出來一種配置。。。），還需要重寫下npm start等相關命令，詳情點擊鏈接查看。

另一個可參考create-react-app的git主頁上推薦的Adding a CSS Preprocessor (Sass, Less etc.) 例子。大概思路就是先安裝一個node環境可編譯sass的插件node-sass-chokidar，然后利用npm-run-all同時運行npm start 和 watch-css（監聽sass文件的命令）。個人感覺繞了個大圈，還是再議吧。。。