官方網站:https://www.npmjs.com/package/roadhog;css
項目搭建demo: https://github.com/ght5935/antd-dva-less-webpackhtml
roadhog 是一個 cli 工具,提供 server
、 build
和 test
三個命令,分別用於本地調試和構建,而且提供了特別易用的 mock 功能。命令行體驗和 create-react-app 一致,配置略有不一樣,好比默認開啓 css modules,而後還提供了 JSON 格式的配置方式。node
因爲 create-react-app 的默認配置不能知足需求,而他又不提供定製的功能,因而基於他實現了一個可配置版。因此若是既要 create-react-app 的優雅體驗,又想定製配置,那麼能夠試試 roadhog 。react
##全局或本地安裝 $ npm i roadhog -g ##檢查版本 $ roadhog -v ##本地發展 $ roadhog dev ##編譯 $ roadhog build $ NO_COMPRESS = 1個roadhog build ##測試 $ roadhog 測試
關於配置的一些基本概念:webpack
.roadhogrc
文件中(若是你不喜歡 JSON 配置,能夠用 .roadhogrc.js
以 JS 的方式編寫,支持 ES6)JSON
,容許註釋false
webpack.config.js
以編碼的方式進行配置,但不推薦,由於 roadhog 自己的 major 或 minor 升級可能會引發兼容問題。使用時會給予警告⚠️⚠️⚠️,詳見 #36 。(webpack.config.js
自己的編寫支持 ES6,會經過 babal-register 作一層轉換。)默認配置git
{ "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, }
查看更多配置相關問題和改進。github
指定 webpack 入口文件,支持 glob 格式。web
若是你的項目是多頁類型,會但願把 src/entry
的文件做爲入口。能夠這樣配:express
'entry': 'src/entry/*.js',
禁用 CSS Modules。最好別關,熟悉並使用他後,你會發現寫樣式簡單了不少。npm
支持 CSSModules 混用,經過 cssModulesExclude 可指定不須要走 CSSModules 的文件列表。
"cssModulesExclude": [ './src/a.css', './src/b.less', ]
使用 hash 文件名。
"hash": true
配置生產環境的 publicPath,開發環境下永遠爲 /
。
配置輸出路徑,默認是 ./dist
配置額外的 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。
配置代理,詳見 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 啓動的端口。
針對特定的環境進行配置。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"]
。
配置主題,其實是配 less 的 modifyVars
。支持 Object 和文件路徑兩種方式的配置。
好比:
"theme": { "@primary-color": "#1DA57A" } 或 "theme": "./node_modules/abc/theme-config.js"
這裏有 如何配置 antd theme 的例子 。
配置 webpack 的 externals 屬性。
配置 webpack 的 library 屬性。
配置 webpack 的 libraryTarget 屬性。
配置是否多頁應用。多頁應用會自動提取公共部分爲 common.js 和 common.css 。
配置 webpack 的 DefinePlugin 插件,define 的值會自動作 JSON.stringify
處理。
CSS 在開發模式下會走 style-loader (被內嵌在 JavaScript 文件中),因此只要保證 JavaScript 的熱更新,便可實現 CSS 的熱更新。
若是你們使用 dva ,配上 babel-plugin-dva-hmr 便可實現 routes 和 components 以及相關 CSS 修改的熱更新,其餘修改會自動刷新頁面。
"env": { "development": { "extraBabelPlugins": ["dva-hmr"] } }
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 裏引用的圖片等。