npm package: @oldyang/zero
Description: 由于webpack配置过于繁琐，每次搭建环境耗时较久，需要升级react，或者webpack时需要每个项目都更新配置,太过于麻烦。所以弄一个cli命令提供项目使用.
Author: yh
Latest version: 1.0.4

# zero

## 简介
由于webpack配置过于繁琐，每次搭建环境耗时较久，需要升级react，或者webpack时需要每个项目都更新配置,太过于麻烦。所以弄一个cli命令提供项目使用.

## 特性
    * 内置 css,babel,postcss,devServer,styleComponent,dva等
    * 支持本地mock

## 使用
```bash
## 安装
$ npm i @yhcn/zero -g
## 检查版本
zero -v
1.0.0

## 本地开发
$ zero dev

## 编译
$ zero build
 
## 不安装全局
在package中配置scripts
列： dev:"zero dev"
```

## Mock
zero dev 支持 mock 功能，在 根目录新疆`mock`文件夹，里面存放根接口对应路径的文件

列：/mock/activity/user/xxx.do
那么 请求 /activity/user/xxx.do 会返回上面文件的内容


## 使用 public 目录
我们约定 public 目录下的文件会在 dev 和 build 时被自动 copy 到输出目录（默认是 ./dist）下。所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。

## 配置(参考zero)
zero 的 webpack 部分功能是基于 af-webpack 实现的。如需配置，在项目根目录新建 .webpackrc 完成，格式为 JSON，比如：

```js
{
  "externals": { "react": "window.React" }
}
```

如果你偏爱 JS 的配置方式，或者需要通过编程的方式做一些判断或者抽象，可以用 .webpackrc.js配置文件，支持 ES6 语法，比如：

```js
export default {
  externals: { react: 'window.React' },
}
```

索引：

* [entry](#entry)
* [theme](#theme)
* [define](#define)
* [externals](#externals)
* [alias](#alias)
* [extraResolveExtensions](#extraResolveExtensions)
* [browserslist](#browserslist)
* [publicPath](#publicpath)
* [outputPath](#outputpath)
* [devtool](#devtool)
* [commons](#commons)
* [hash](#hash)
* [html](#html)
* [disableCSSModules](#disablecssmodules)
* [disableCSSSourceMap](#disablecsssourcemap)
* [extraBabelPresets](#extrababelpresets)
* [extraBabelPlugins](#extrababelplugins)
* [extraBabelIncludes](#extrababelincludes)
* [copy](#copy)
* [proxy](#proxy)
* [sass](#sass)
* [manifest](#manifest)
* [ignoreMomentLocale](#ignoremomentlocale)
* [disableDynamicImport](#disabledynamicimport)
* [env](#env)

### entry

指定 webpack 入口文件，支持 [glob](https://github.com/isaacs/node-glob) 格式。

比如你的项目是多页类型，会希望把 src/pages 的文件作为入口。可以这样配：

```
"entry": "src/pages/*.js"
```

### theme
配置主题，实际上是配 less 变量。支持对象和字符串两种类型，字符串需要指向一个返回配置的文件。
比如：

```
"theme": {
  "@primary-color": "#1DA57A"
}
```

或者，

```
"theme": "./theme-config.js"
```

### define
通过 webpack 的 DefinePlugin 传递给代码，值会自动做 `JSON.stringify` 处理。
比如：

```js
"define": {
  "process.env.TEST": 1,
  "USE_COMMA": 2,
}
```

### externals
配置 webpack 的?[externals](https://webpack.js.org/configuration/externals/)?属性。
比如：

```js
// 配置 react 和 react-dom 不打入代码
"externals": {
  "react": "window.React",
  "react-dom": "window.ReactDOM"
}
```

### alias
配置 webpack 的 [resolve.alias](https://webpack.js.org/configuration/resolve/#resolve-alias) 属性。

### extraResolveExtensions

配置 webpack 的 [resolve.extensions](https://webpack.js.org/configuration/resolve/#resolve-extensions) 属性。

### browserslist
配置 [browserslist](https://github.com/ai/browserslist)，同时作用于 babel-preset-env 和 autoprefixer。
比如：

```js
"browserslist": [
  "> 1%",
  "last 2 versions"
]
```

### publicPath
配置 webpack 的 [output.publicPath](https://webpack.js.org/configuration/output/#output-publicpath) 属性。

### outputPath
配置 webpack 的?[output.path](https://webpack.js.org/configuration/output/#output-path)?属性。

### devtool
配置 webpack 的 [devtool](https://webpack.js.org/configuration/devtool/) 属性。

### commons

配置 webpack 的 [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) 插件，格式为数组，有几项配几个 CommonsChunkPlugin 。

比如：

```markup
"commons": [
  {
    async: '__common',
    children: true,
    minChunks(module, count) {
      if (pageCount <= 2) {
        return count >= pageCount;
      }
      return count >= pageCount * 0.5;
    },
  },
]
```

### hash

配置让构建产物文件名带 hash，通常会和 [manifest](#manifest) 配合使用。

### html

配置 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 插件。

比如：

```markup
"html": {
  "template": "./src/index.ejs"
}
```

### disableCSSModules

禁用 [CSS Modules](https://github.com/css-modules/css-modules)。

### disableCSSSourceMap

禁用 CSS 的 SourceMap 生成。

### extraBabelPresets

定义额外的 babel preset 列表，格式为数组。

### extraBabelPlugins

定义额外的 babel plugin 列表，格式为数组。

### extraBabelIncludes

定义额外需要做 babel 转换的文件匹配列表，格式为数组。

### copy

定义需要单纯做复制的文件列表，格式为数组，项的格式参考 [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) 的配置。

比如：

```markup
"copy": [
  {
    "from": "",
    "to": ""
  }
]
```

### proxy

配置 webpack-dev-server 的 [proxy](https://webpack.js.org/configuration/dev-server/#devserver-proxy) 属性。
如果要代理请求到其他服务器，可以这样配：

```markup
"proxy": {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}
```

然后访问?`/api/users`?就能访问到?[http://jsonplaceholder.typicode.com/users](http://jsonplaceholder.typicode.com/users)?的数据。

### sass
配置 [node-sass](https://github.com/sass/node-sass#options) 的选项。注意：使用 sass 时需在项目目录安装 node-sass 和 sass-loader 依赖。

### manifest
配置后会生成 manifest.json，option 传给 [https://www.npmjs.com/package/webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin)。
比如：

```markup
"manifest": {
  "basePath": "/app/"
}
```

### ignoreMomentLocale

忽略 moment 的 locale 文件，用于减少尺寸。

### disableDynamicImport

禁用 `import()` 按需加载，全部打包在一个文件里，通过 [babel-plugin-dynamic-import-node-sync](https://github.com/seeden/babel-plugin-dynamic-import-node-sync) 实现。

### env

针对特定的环境进行配置。dev 的环境变量是?`development`，build 的环境变量是?`production`。
比如：

```js
"extraBabelPlugins": ["transform-runtime"],
"env": {
  "development": {
    "extraBabelPlugins": ["dva-hmr"]
  }
}
```

这样，开发环境下的 extraBabelPlugins 是?`["transform-runtime", "dva-hmr"]`，而生产环境下是?`["transform-runtime"]`。

## 环境变量

可环境变量临时配置一些参数，包括：

* `PORT`，端口号，默认 8000
* `HOST`，默认 localhost
* `ANALYZE`，是否在 build 时分析构建产物
* `ESLINT`，设为 `none` 时禁用 eslint 检测
* `TSLINT`，设为 `none` 时禁用 tslint 检测
* `COMPRESS`, 设为 `none` 时 build 时不压缩
* `BROWSER`, 设为 `none` 时不自动打开浏览器

比如使用 3000 端口启动 dev server，

```bash
# OS X, Linux
$ PORT=3000 zero dev

# Windows (cmd.exe)
$ set PORT=3000&&zero dev

# Or use cross-env for all platforms
$ cross-env PORT=3000 zero dev
```