官方网站：https://www.npmjs.com/package/roadhog
一: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 测试
1.配置
关于配置的一些基本概念：
-
- 配置存于
.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 处理。
2.HMR (热替换)
CSS 在开发模式下会走 style-loader (被内嵌在 JavaScript 文件中)，所以只要保证 JavaScript 的热更新，即可实现 CSS 的热更新。
如果大家使用 dva ，配上 babel-plugin-dva-hmr 即可实现 routes 和 components 以及相关 CSS 修改的热更新，其他修改会自动刷新页面。
"env": { "development": { "extraBabelPlugins": ["dva-hmr"] } }
3.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', };
4.环境变量
可环境变量临时配置一些参数，包括：
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
5.使用 public 目录
我们约定 public 目录下的文件会在 server 和 build 时被自动 copy 到输出目录（默认是 ./dist）下。所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。
__EOF__
作 者：echo丶若梦
出 处：https://www.cnblogs.com/gaoht/p/9400386.html
关于博主：编程路上的小学生，热爱技术，喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
来源：https://blog.csdn.net/hzxOnlineOk/article/details/100976848