# webab

**Repository Path**: anuny/webab

## Basic Information

- **Project Name**: webab
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-23
- **Last Updated**: 2021-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webab
提供开箱即用零配置的前端打包工具，全局安装，到处使用<br>
基于webpack4+babel7，无需安装任何依赖，支持 `jsx` `tsx` `ts` `js` + `css` `less` `sass`<br>
项目地址：[https://github.com/anuny/webab](https://github.com/anuny/webab)

## 🛒安装
```shell
npm i webab -g
```

### 🐞调试模式
```shell
webab 或者 webab dev
```

### 📦编译模式
```shell
# 打包生产模式
webab build

# 打包开发模式
webab build -dev
```

## 🔨配置
- 无需配置即可使用，项目默认入口文件为`./src/main`,支持js、jsx、ts、tsx文件；默认html模板文件为`./src/index.html`
- 如需自定义配置，配置文件为 `./webab.config.js`
```javascript
// 示例
module.exports = {
  app:{},
  dirs:{},
  extensions:[],
  ...
}
```
### app 
自定义参数，应用内通过 `process.env.app` 获取<br>
type `any`

### dirs
基础路径配置 <br>
type `Object`
```javascript
// 默认
dirs:{
  src : 'src',
  public: 'public',
  dist: 'dist'
}
```

### extensions
自动解析的扩展名。参考 [webpack extensions](https://v4.webpack.docschina.org/configuration/resolve#resolve-extensions)<br>
type `Array`
```javascript
// 默认
extensions:['.js', '.jsx','.ts','.tsx','.json','.vue','.css','.less','.sass','.scss']
```
### alias
创建 `import` 或 `require` 的别名，使模块引入变得更简单。参考 [webpack alias](https://v4.webpack.docschina.org/configuration/resolve/#resolve-alias)<br>
type `Object`
```javascript
// 默认
alias:{
  'vue$': 'vue/dist/vue.esm.js', 
  '#' : path.resolve(__dirname),  
  '@' : path.resolve('src' ) 
}
```

### entry
入口文件配置,参考 [webpack entry](https://v4.webpack.docschina.org/configuration/entry-context/#entry)<br>
type `Object`
```javascript
// 默认
entry:{
  main : path.resolve('src', 'main')
}
```

### template
html模板文件配置，支持多页面，为空则不打包html文件。参考 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)<br>
type `Object`
```javascript
// 默认
entry:{
  'index.html': path.resolve('src', 'index.html')
}
```
### favicon
favicon.ico配置<br>
type `String`
```javascript
favicon: path.resolve('src', 'favicon.ico')
```

### fileName
输出文件名配置 参考 [webpack output.filename](https://v4.webpack.docschina.org/configuration/output/#output-filename)<br>
type `Object`
```javascript
fileName:{
  js:'[name].js', 
  css:'[name].css', 
  img:'[name].[ext]', 
  font:'[name].[ext]'
}
```

### dev
开发调试配置, 参考 [webpack.devtool](https://v4.webpack.docschina.org/configuration/devtool/)  [webpack.output.publicpath](https://v4.webpack.docschina.org/configuration/output/#output-publicpath)<br>
type `Object`
```javascript
dev:{
  host:'0.0.0.0',
  port:'8080',
  devtool:'cheap-module-eval-source-map',
  publicPath:''
}
```

### build
生产打包配置<br>
type `Object`
```javascript
build:{
  devtool:'none',
  publicPath:''
}
```
### provide
自动加载模块配置，参考 [webpack.providePlugin](https://v4.webpack.docschina.org/plugins/provide-plugin/)<br>
type `Object`

### jsx
jsx配置，默认使用React。参考 [babel-react-jsx](https://www.babeljs.cn/docs/babel-plugin-transform-react-jsx#react-automatic-runtime-1)<br>
type `Object`
```javascript
jsx:{
  pragma:'...',
  pragmaFrag:'...'
}
```

### globalStyle
全局样式文件配置， 参考 [sass-resources-loader](https://www.npmjs.com/package/sass-resources-loader)<br>
type `String`
```javascript
// 默认
globalStyle:'assets/css/vars'
```

### 📑获取参数
运行时变量 `NODE_ENV`  值为：`development` or `production`<br>
自定义变量 `app`  默认 `undefined`

- 在配置文件里使用
```javascript
// 示例：为不同的运行环境设置不同的logo图片地址
const mode = process.env.NODE_ENV
module.exports = {
  app:{
    logo:`./images/${mode}/logo.jpg`
  },
  ...
}
```

- 在html模板里使用
```html
<!-- 获取运行时变量 -->
<%= webab.NODE_ENV %>
<!-- 获取自定义变量 -->
<%= webab.app.xxx %>
```
- 在项目javascript里使用
```javascript
// 获取运行时变量
const mode = process.env.NODE_ENV
// 获取自定义变量
const app= process.env.app
```