Webab
提供开箱即用零配置的前端打包工具，全局安装，到处使用
基于webpack4+babel7，无需安装任何依赖，支持 jsx tsx ts js + css less sass
项目地址：https://github.com/anuny/webab
🛒 安装
npm i webab -g
🐞 调试模式
webab 或者 webab dev
📦 编译模式
# 打包生产模式
webab build
# 打包开发模式
webab build -dev
🔨 配置
- 无需配置即可使用，项目默认入口文件为
./src/main,支持js、jsx、ts、tsx文件；默认html模板文件为./src/index.html - 如需自定义配置，配置文件为
./webab.config.js
// 示例
module.exports = {
app:{},
dirs:{},
extensions:[],
...
}app
自定义参数，应用内通过 process.env.app 获取
type any
dirs
基础路径配置
type Object
// 默认
dirs:{
src : 'src',
public: 'public',
dist: 'dist'
}extensions
自动解析的扩展名。参考 webpack extensions
type Array
// 默认
extensions:['.js', '.jsx','.ts','.tsx','.json','.vue','.css','.less','.sass','.scss']alias
创建 import 或 require 的别名，使模块引入变得更简单。参考 webpack alias
type Object
// 默认
alias:{
'vue$': 'vue/dist/vue.esm.js',
'#' : path.resolve(__dirname),
'@' : path.resolve('src' )
}entry
入口文件配置,参考 webpack entry
type Object
// 默认
entry:{
main : path.resolve('src', 'main')
}template
html模板文件配置，支持多页面，为空则不打包html文件。参考 html-webpack-plugin
type Object
// 默认
entry:{
'index.html': path.resolve('src', 'index.html')
}favicon
favicon.ico配置
type String
favicon: path.resolve('src', 'favicon.ico')fileName
输出文件名配置 参考 webpack output.filename
type Object
fileName:{
js:'[name].js',
css:'[name].css',
img:'[name].[ext]',
font:'[name].[ext]'
}dev
开发调试配置, 参考 webpack.devtool webpack.output.publicpath
type Object
dev:{
host:'0.0.0.0',
port:'8080',
devtool:'cheap-module-eval-source-map',
publicPath:''
}build
生产打包配置
type Object
build:{
devtool:'none',
publicPath:''
}provide
自动加载模块配置，参考 webpack.providePlugin
type Object
jsx
jsx配置，默认使用React。参考 babel-react-jsx
type Object
jsx:{
pragma:'...',
pragmaFrag:'...'
}globalStyle
全局样式文件配置， 参考 sass-resources-loader
type String
// 默认
globalStyle:'assets/css/vars'
📑 获取参数
运行时变量 NODE_ENV 值为：development or production
自定义变量 app 默认 undefined
- 在配置文件里使用
// 示例：为不同的运行环境设置不同的logo图片地址
const mode = process.env.NODE_ENV
module.exports = {
app:{
logo:`./images/${mode}/logo.jpg`
},
...
}- 在html模板里使用
<!-- 获取运行时变量 -->
<%= webab.NODE_ENV %>
<!-- 获取自定义变量 -->
<%= webab.app.xxx %>- 在项目javascript里使用
// 获取运行时变量
const mode = process.env.NODE_ENV
// 获取自定义变量
const app= process.env.app