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