abc-cli

讯盟开发套件，基于 webpack，包含开发时全生命周期管理，生成脚手架，自动创建项目仓库并关联（可控制），本地开发，调式，打包上线以及 eslint 检测和代码提交规范，大部分场景下用户无需关心 webpack 配置，通过简单配置即可进行本地调试和线上打包

node >= 7.6.0

默认支持

• 支持 iconfont, jpg, jpeg, png, gif, svg, vue, less，scss 格式
• 支持 postcss，autoprefixer
• 支持 react， vue, ts
• 支持 es6 语法
• 支持 hmr
• 支持接口代理
• 支持异步代码动态加载
• 默认启用 lodash, date-fns, moment(仅打包中文语言包), antd（按需打包) 优化，大幅减少打包体积
• 支持 dll 打包，大幅提升生成环境构建速度，以及持久化缓存
• 基于 webpack 4.x
• 基于 webpack-serve

安装

## 安装 yarn
npm i -g yarn

## 安装 abc 工具，一个组件生成和构建工具
yarn add global abc-cli

基本配置

•  本地开发调试 - 启动调式服务器，启动的服务器默认拥有 hmr 功能

abc dev

• 代码上线阶段 - 执行代码构建

abc build

• 代码 babel 转义

abc babel

• 发布上线

abc publish

高阶配置 - 完整的配置文件（abc.config.js）说明

{
  "port": 8080, // 服务器端口配置，默认 8080
  "host": "localhost", // host地址配置，默认 localhost
  "entry": {}, // 入口文件配置，一般需要覆盖配置，比如：entry: { app: './index.js' }，同 webpack 配置方式一致
  "output": {}, // 输出配置，默认：{ path: './build', filename: '[name].js' }，同 webpack 配置方式一致
  "rules": [], // loader 配置，同 webpack 配置方式一致
  "plugins": [], // 插件配置，同 webpack 配置方式一致
  "alias": {}, // 别名配置，同 webpack 配置方式一致
  "staticPath": "", // 开发模式下的静态目录，线上构件时，会将静态目录下的文件拷贝到 output 中配置的 path 路径中
  "babelOptions": {}, // babel 选项配置, 配置同 .babelrc 文件一致
  "browsersList": null, // autoprefixer 中的支持浏览器规则配置
  "isExtractCss": true, // 是否抽离 css 成单独的文件，默认抽离成单独的文件，如果启用了 cssModule，此选项不生效
  "cssModule": {
    "enable": false,
    "localIdentName": `[local]-[hash:base64:5]`
  }, // 是否启用 cssModule，默认 false
  "microApp": false, // 是否微应用模式
  "bundleStats": false, // 是否输出统计信息，便于性能优化时做分析
  "terserConfig": {}, // 默认配置 { parallel: true, terserOptions: { compress: { drop_console: true, drop_debugger: true } } }
  "splitChunks": {}, // 拆包配置
  "compileDependencies": [], // 指定需要编译的三方包，一般用于需要兼容 ie11 浏览器，但是项目依赖的三方包不支持 ie11 的场景
  "enableHtmlWebpackPlugin": true, // 是否启用 HtmlWebpackPlugin 插件
  "htmlTemplateUrl": "", // 页面启动页默认配置，一般需要覆盖配置
  "htmlWebpackPluginOptions": {}, // htmlWebpackPlugin 插件选项配置, 优先级高于 htmlTemplateUrl 配置项
  "devtool": "eval-source-map", // soucemap 配置，开发模式下使用，默认：eval-source-map
  "outputDir": "dist", // 打包输出路径
  "disableErrorOverlay": false, // 是否加载 ErrorOverlayPlugin 插件
  "proxy": {}, // 代理设置，比如：{ '/api': 'http://www.aliyun.com/mocks', 'example/:id': (params) => return { target: 'http://localhost:8080/', logs: true } }
  "terserConfig": {}, // 默认配置 { parallel: true, terserOptions: { compress: { drop_console: true, drop_debugger: true } } }
  "history": {
    "whiteList": [] // history 路由下的白名单配置，比如接口代理时，配置在 whiteList 中的接口，不经过中间件处理
  },
  "https": false, // 是否启用 https, 默认：false
  "jsxLoader": [], // 针对 js, jsx 的 loader 配置
  "tsxLoader": [], // 针对 ts, tsx 的 loader 配置
  "resolvePlugins": [], // 针对 resolve 中的 plugins 配置
  "externals": {
    // 比如：不打包 react, react-dom, jquery，一般开发组件时，需要配置 externals
    "react": {
      "root": "React",
      "commonjs2": "react",
      "commonjs": "react",
      "amd": "react"
    },
    "react-dom": {
      "root": "ReactDOM",
      "commonjs2": "react-dom",
      "commonjs": "react-dom",
      "amd": "react-dom"
    },
    "jquery": {
      "root": "jQuery",
      "commonjs2": "jquery",
      "commonjs": "jquery",
      "amd": "jquery"
    }
  },
  "env": {
    "development": {
      // 开发环境配置
      "rules": [],
      "plugins": [],
      "htmlWebpackPluginOptions": {}
    },
    "daily": {
      // 日常环境配置
      "rules": [],
      "plugins": [],
      "htmlWebpackPluginOptions": {}
    },
    "production": {
      // 生产环境配置
      "rules": [],
      "plugins": [],
      "htmlWebpackPluginOptions": {}
    }
  },
  "dll": {
    "enable": false, // 是否启用 dll 打包，启用了 dll 打包后，请先执行 abc dll，可大幅提升构建速度
    "vendors": ["react"] // 指定第三方包生成到 vendor 文件中
  },
  "cleanBuild": true, // 每次构建是否清除 build or dist 目录，默认 true
  "analyzerReport": false, // 生成打包分析报告，默认 false，方便分析打包后的 bundle 文件构成
  "buildNotifier": {
    "show": true, // 是否启用构建通知栏提醒，默认 true
    "title": "abc build", // 通知标题
    "timeout": 5 // 通知超时时间，默认：5s
  }
}

一些典型的配置

• 指定入口和模板路径，以及设置代理

{
  "entry": {
    "app": "./src/index.js"
  },
  "htmlTemplateUrl": "./index.html",
  "proxy": {
    "/api": "http://www.aliyun.com/mocks"
  }
}