官方網站：https://www.npmjs.com/package/roadhog;
項目搭建demo: https://github.com/ght5935/antd-dva-less-webpack
一:roadhog
roadhog 是一個 cli 工具，提供 server、 build 和 test 三個命令，分別用於本地調試和構建，並且提供了特別易用的 mock 功能。命令行體驗和 create-react-app 一致，配置略有不同，比如默認開啟 css modules，然后還提供了 JSON 格式的配置方式。
二:為什么要用
由於 create-react-app 的默認配置不能滿足需求，而他又不提供定制的功能，於是基於他實現了一個可配置版。所以如果既要 create-react-app 的優雅體驗，又想定制配置，那么可以試試 roadhog 。
三:入門
##全局或本地安裝 $ npm i roadhog -g ＃＃檢查版本 $ roadhog -v ＃＃本地發展 $ roadhog dev ＃＃編譯 $ roadhog build $ NO_COMPRESS = 1個roadhog build ＃＃測試 $ roadhog 測試
配置
關於配置的一些基本概念：
- 配置存於
.roadhogrc文件中（如果你不喜歡 JSON 配置，可以用.roadhogrc.js以 JS 的方式編寫，支持 ES6） - 格式為
JSON，允許注釋 - 布爾類型的配置項默認值均為
false - 支持通過
webpack.config.js以編碼的方式進行配置，但不推薦，因為 roadhog 本身的 major 或 minor 升級可能會引起兼容問題。使用時會給予警告⚠️⚠️⚠️，詳見 #36 。（webpack.config.js本身的編寫支持 ES6，會通過 babal-register 做一層轉換。）
默認配置
{ "entry": "src/index.js", "disableCSSModules": false, "cssModulesExclude": [], "publicPath": "/", "outputPath": "./dist", "extraBabelPlugins": [], "extraPostCSSPlugins": [], "sass": false, "hash": false, "autoprefixer": null, "proxy": null, "externals": null, "library": null, "libraryTarget": "var", "multipage": false, "define": null, "env": null, "theme": null, }
查看更多配置相關問題和改進。
entry
指定 webpack 入口文件，支持 glob 格式。
如果你的項目是多頁類型，會希望把 src/entry的文件作為入口。可以這樣配：
'entry': 'src/entry/*.js',
disableCSSModules
禁用 CSS Modules。最好別關，熟悉並使用他后，你會發現寫樣式簡單了很多。
cssModulesExclude
支持 CSSModules 混用，通過 cssModulesExclude 可指定不需要走 CSSModules 的文件列表。
"cssModulesExclude": [ './src/a.css', './src/b.less', ]
hash
使用 hash 文件名。
"hash": true
publicPath
配置生產環境的 publicPath，開發環境下永遠為 /。
outputPath
配置輸出路徑，默認是 ./dist
extraBabelPlugins
配置額外的 babel plugin。babel plugin 只能添加，不允許覆蓋和刪除。
比如，同時使用 antd, dva 時，通常需要這么配：
"extraBabelPlugins": [ "transform-runtime", "dva-hmr", ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }] ] 或 "extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": true }] ]
同時安裝相關依賴：
$ npm i babel-plugin-transform-runtime babel-plugin-import babel-plugin-dva-hmr --save-dev
$ npm i babel-runtime --save
注意：這么配還有個問題，dva-hmr 是開發環境的插件，如果 build 時也用上就會打出冗余代碼。解決方案詳見 #env。
proxy
配置代理，詳見 webpack-dev-server#proxy。
如果要代理請求到其他服務器，可以這樣配：
"proxy": { "/api": { "target": "http://jsonplaceholder.typicode.com/", "changeOrigin": true, "pathRewrite": { "^/api" : "" } } }
然后訪問 /api/users 就能訪問到 http://jsonplaceholder.typicode.com/users 的數據。
如果要做數據 mock，可以考慮和 json-server 結合使用，把 /api 代理到 json-server 啟動的端口。
env
針對特定的環境進行配置。server 的環境變量是 development，build 的環境變量是 production。
比如：
"extraBabelPlugins": ["transform-runtime"], "env": { "development": { "extraBabelPlugins": ["dva-hmr"] } } 或 "env": { "development": { "extraBabelPlugins": [ "dva-hmr", "transform-runtime", ["import", { "libraryName": "antd", "style": true }] ] }, "production": { 'extraBabelIncludes': [ 'node_modules/swiper/', 'node_modules/dom7/' ], "extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": true }] ] } }
這樣，開發環境下的 extraBabelPlugins 是 ["transform-runtime", "dva-hmr"]，而生產環境下是 ["transform-runtime"]。
theme
配置主題，實際上是配 less 的 modifyVars。支持 Object 和文件路徑兩種方式的配置。
比如：
"theme": { "@primary-color": "#1DA57A" } 或 "theme": "./node_modules/abc/theme-config.js"
這里有 如何配置 antd theme 的例子 。
externals
配置 webpack 的 externals 屬性。
library
配置 webpack 的 library 屬性。
libraryTarget
配置 webpack 的 libraryTarget 屬性。
multipage
配置是否多頁應用。多頁應用會自動提取公共部分為 common.js 和 common.css 。
define
配置 webpack 的 DefinePlugin 插件，define 的值會自動做 JSON.stringify 處理。
HMR (熱替換)
CSS 在開發模式下會走 style-loader (被內嵌在 JavaScript 文件中)，所以只要保證 JavaScript 的熱更新，即可實現 CSS 的熱更新。
如果大家使用 dva ，配上 babel-plugin-dva-hmr 即可實現 routes 和 components 以及相關 CSS 修改的熱更新，其他修改會自動刷新頁面。
"env": { "development": { "extraBabelPlugins": ["dva-hmr"] } }
Mock
roadhog server 支持 mock 功能，類似 dora-plugin-proxy，在 .roadhogrc.mock.js 中進行配置，支持基於 require 動態分析的實時刷新，支持 ES6 語法，以及友好的出錯提示。
eg:
export default { // 支持值為 Object 和 Array 'GET /api/users': { users: [1,2] }, // GET POST 可省略 '/api/users/1': { id: 1 }, // 支持自定義函數，API 參考 express@4 'POST /api/users/create': (req, res) => { res.end('OK'); }, // Forward 到另一個服務器 'GET /assets/*': 'https://assets.online/', // Forward 到另一個服務器，並指定子路徑 // 請求 /someDir/0.0.50/index.css 會被代理到 https://g.alicdn.com/tb-page/taobao-home, 實際返回 https://g.alicdn.com/tb-page/taobao-home/0.0.50/index.css 'GET /someDir/(.*)': 'https://g.alicdn.com/tb-page/taobao-home', };
環境變量
可環境變量臨時配置一些參數，包括：
PORT, 端口號，默認 8000HOST, 默認 localhostHTTPS，是否開啟 https，默認關閉BROWSER，設為 none 時不自動打開瀏覽器CLEAR_CONSOLE，設為 none 時清屏
比如，使用 3000 端口開啟服務器可以這樣：
# OS X, Linux $ PORT=3000 roadhog server # Windows (cmd.exe) $ set PORT=3000&&roadhog server # Or use cross-env for all platforms $ cross-env PORT=3000 roadhog server
使用 public 目錄
我們約定 public 目錄下的文件會在 server 和 build 時被自動 copy 到輸出目錄（默認是 ./dist）下。所以可以在這里存放 favicon, iconfont, html, html 里引用的圖片等。