@oldyang/zero
v1.0.4
Published
由于webpack配置过于繁琐，每次搭建环境耗时较久，需要升级react，或者webpack时需要每个项目都更新配置,太过于麻烦。所以弄一个cli命令提供项目使用.
Readme
zero
简介
由于webpack配置过于繁琐，每次搭建环境耗时较久，需要升级react，或者webpack时需要每个项目都更新配置,太过于麻烦。所以弄一个cli命令提供项目使用.
特性
* 内置 css,babel,postcss,devServer,styleComponent,dva等
* 支持本地mock使用
## 安装
$ 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，比如：
{
"externals": { "react": "window.React" }
}如果你偏爱 JS 的配置方式，或者需要通过编程的方式做一些判断或者抽象，可以用 .webpackrc.js配置文件，支持 ES6 语法，比如：
export default {
externals: { react: 'window.React' },
}索引：
- entry
- theme
- define
- externals
- alias
- extraResolveExtensions
- browserslist
- publicPath
- outputPath
- devtool
- commons
- hash
- html
- disableCSSModules
- disableCSSSourceMap
- extraBabelPresets
- extraBabelPlugins
- extraBabelIncludes
- copy
- proxy
- sass
- manifest
- ignoreMomentLocale
- disableDynamicImport
- env
entry
指定 webpack 入口文件，支持 glob 格式。
比如你的项目是多页类型，会希望把 src/pages 的文件作为入口。可以这样配：
"entry": "src/pages/*.js"theme
配置主题，实际上是配 less 变量。支持对象和字符串两种类型，字符串需要指向一个返回配置的文件。 比如：
"theme": {
"@primary-color": "#1DA57A"
}或者，
"theme": "./theme-config.js"define
通过 webpack 的 DefinePlugin 传递给代码，值会自动做 JSON.stringify 处理。
比如：
"define": {
"process.env.TEST": 1,
"USE_COMMA": 2,
}externals
配置 webpack 的?externals?属性。 比如：
// 配置 react 和 react-dom 不打入代码
"externals": {
"react": "window.React",
"react-dom": "window.ReactDOM"
}alias
配置 webpack 的 resolve.alias 属性。
extraResolveExtensions
配置 webpack 的 resolve.extensions 属性。
browserslist
配置 browserslist，同时作用于 babel-preset-env 和 autoprefixer。 比如：
"browserslist": [
"> 1%",
"last 2 versions"
]publicPath
配置 webpack 的 output.publicPath 属性。
outputPath
配置 webpack 的?output.path?属性。
devtool
配置 webpack 的 devtool 属性。
commons
配置 webpack 的 CommonsChunkPlugin 插件，格式为数组，有几项配几个 CommonsChunkPlugin 。
比如：
"commons": [
{
async: '__common',
children: true,
minChunks(module, count) {
if (pageCount <= 2) {
return count >= pageCount;
}
return count >= pageCount * 0.5;
},
},
]hash
配置让构建产物文件名带 hash，通常会和 manifest 配合使用。
html
配置 html-webpack-plugin 插件。
比如：
"html": {
"template": "./src/index.ejs"
}disableCSSModules
禁用 CSS Modules。
disableCSSSourceMap
禁用 CSS 的 SourceMap 生成。
extraBabelPresets
定义额外的 babel preset 列表，格式为数组。
extraBabelPlugins
定义额外的 babel plugin 列表，格式为数组。
extraBabelIncludes
定义额外需要做 babel 转换的文件匹配列表，格式为数组。
copy
定义需要单纯做复制的文件列表，格式为数组，项的格式参考 copy-webpack-plugin 的配置。
比如：
"copy": [
{
"from": "",
"to": ""
}
]proxy
配置 webpack-dev-server 的 proxy 属性。 如果要代理请求到其他服务器，可以这样配：
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}然后访问?/api/users?就能访问到?http://jsonplaceholder.typicode.com/users?的数据。
sass
配置 node-sass 的选项。注意：使用 sass 时需在项目目录安装 node-sass 和 sass-loader 依赖。
manifest
配置后会生成 manifest.json，option 传给 https://www.npmjs.com/package/webpack-manifest-plugin。 比如：
"manifest": {
"basePath": "/app/"
}ignoreMomentLocale
忽略 moment 的 locale 文件，用于减少尺寸。
disableDynamicImport
禁用 import() 按需加载，全部打包在一个文件里，通过 babel-plugin-dynamic-import-node-sync 实现。
env
针对特定的环境进行配置。dev 的环境变量是?development，build 的环境变量是?production。
比如：
"extraBabelPlugins": ["transform-runtime"],
"env": {
"development": {
"extraBabelPlugins": ["dva-hmr"]
}
}这样，开发环境下的 extraBabelPlugins 是?["transform-runtime", "dva-hmr"]，而生产环境下是?["transform-runtime"]。
环境变量
可环境变量临时配置一些参数，包括：
PORT，端口号，默认 8000HOST，默认 localhostANALYZE，是否在 build 时分析构建产物ESLINT，设为none时禁用 eslint 检测TSLINT，设为none时禁用 tslint 检测COMPRESS, 设为none时 build 时不压缩BROWSER, 设为none时不自动打开浏览器
比如使用 3000 端口启动 dev server，
# 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