roadhog

> based on roadhog v1.1.1,add cssModulesInclude configuration to load less into css-module from node_modules
> 基于 roadhog v1.1.1，添加了cssModulesInclude属性以css-module方式加载node_modules目录下的依赖

更多配置及使用信息请参考原文roadhog v1.1.1
For more information please check the original

配置

> cssModulesInclude 添加配置加载node_modules目录下的less文件为CssModule的方式

``json
{
"entry": "src/index.js",
"disableCSSModules": false,
"cssModulesExclude": [],
"cssModulesInclude": [],
"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,
}
`

查看更多配置相关问题和改进。

$3

指定 webpack 入口文件，支持 glob 格式。

如果你的项目是多页类型，会希望把 src/pages 的文件作为入口。可以这样配：

`
"entry": "src/pages/*.js"
`

$3

禁用 CSS Modules。最好别关，熟悉并使用他后，你会发现写样式简单了很多。

$3

支持 CSSModules 混用，通过 cssModulesExclude 可指定不需要走 CSSModules 的文件列表。

`
"cssModulesExclude": [
'./src/a.css',
'./src/b.less',
]
`

$3

通过 cssModulesInclude 指定less需要使用module方式的依赖包名称。

`
"cssModulesInclude": [
'bizcomponent'
]
`

$3

使用 hash 文件名。

`
"hash": true
`

$3

配置生产环境的 publicPath，开发环境下永远为 /。

$3

配置输出路径，默认是 ./dist。

$3

配置额外的 babel plugin。babel plugin 只能添加，不允许覆盖和删除。

比如，同时使用 antd, dva 时，通常需要这么配：

`
"extraBabelPlugins": [
"transform-runtime",
"dva-hmr",
["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }]
]
`

同时安装相关依赖：

`bash
$ npm i babel-plugin-transform-runtime babel-plugin-import babel-plugin-dva-hmr --save-dev
$ npm i babel-runtime --save
`

注意：这么配还有个问题，dva-hmr 是开发环境的插件，如果 build 时也用上就会打出冗余代码。解决方案详见 #env。

$3

配置额外的 postcss 插件。

注意：由于 postcss 的插件是以函数的方式进行配置的，所以这个配置只能在 .roadhogrc.js 里使用。

比如：

`
extraPostCSSPlugins: [
pxtorem({
rootValue: 100,
propWhiteList: [],
}),
],
`

$3

配置 autoprefixer 参数，详见 autoprefixer 和 browserslist。

比如，如果是做移动端的开发，可以配成：

`
"autoprefixer": {
"browsers": [
"iOS >= 8", "Android >= 4"
]
}
`

$3

支持 sass，值为 node-sass 的配置参数。

注意：开启 sass 支持需在项目代码中安装 node-sass 和 sass-loader 两个依赖。

$3

配置代理，详见 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 启动的端口。

$3

配置 webpack 的 externals 属性。

$3

配置 webpack 的 library 属性。

$3

配置 webpack 的 libraryTarget 属性。

$3

配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css 。

$3

配置 webpack 的 DefinePlugin 插件，define 的值会自动做 JSON.stringify 处理。

$3

针对特定的环境进行配置。server 的环境变量是 development，build 的环境变量是 production。

比如：

`
"extraBabelPlugins": ["transform-runtime"],
"env": {
"development": {
"extraBabelPlugins": ["dva-hmr"]
}
}
`

这样，开发环境下的 extraBabelPlugins 是 ["transform-runtime", "dva-hmr"]，而生产环境下是 ["transform-runtime"]。

$3

配置主题，实际上是配 less 的 modifyVars。支持 Object 和文件路径两种方式的配置。

比如：

`
"theme": {
"@primary-color": "#1DA57A"
}
`

或者，

`
"theme": "./node_modules/abc/theme-config.js"
`

这里有 如何配置 antd theme 的例子 。

$3

Notice:
- roadhog 版本必须 >= 0.6.0-beta1。
- 因为 .roadhogrc 配置文件优先级大于 .roadhogrc.js, 请先删除 .roadhogrc。

配置一个路径数组, 该路径下的 svg 文件会全部交给 svg-sprite-loader 处理

比如，使用 antd-mobile@1 的 自定义 svg icon 功能的用户，可以在 .roadhogrc.js 文件中做如下配置

`js
const path = require('path');
const svgSpriteDirs = [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
path.resolve(__dirname, 'src/my-project-svg-foler'), // 业务代码本地私有 svg 存放目录
];

export default {
// ...
svgSpriteLoaderDirs: svgSpriteDirs,
//...
}

`




环境变量

可环境变量临时配置一些参数，包括：

* PORT, 端口号，默认 8000
* HOST, 默认 localhost
* HTTPS，是否开启 https，默认关闭
* BROWSER，设为 none 时不自动打开浏览器
* CLEAR_CONSOLE，设为 none 时清屏

比如，使用 3000 端口开启服务器可以这样：

`bash


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
`

.babelrc

`json
{
"presets": [
"es2015",
"stage-0"
],
"plugins": [
"add-module-exports"
]
}
``

LICENSE

MIT