@alauda/custom-webpack

Custom webpack configuration with alauda dev server and other great features

• 发版操作指引
• What features are included?
• Upcoming Features
• Usage
  • Simplest
  • Commands
    • Serve on production mode
    • Minify index.html on building
    • Change console env
  • Advanced
  • Environments
  • Useful Internal API
• PAC 流水线
• LICENSE

发版操作指引

如果你要通过 PAC 发布 @alauda/custom-webpack，按下面的最短路径走：

1. 从 master 拉最新代码并创建功能分支。

2. 完成改动后执行 yarn changeset 补一条 changeset。

3. 本地执行：

   yarn lint
   yarn build
   npm pack --dry-run

4. 推送分支，并创建一个目标分支为 master 的 merge request。

5. 在 merge request 里评论 /publish-preview。

6. 等待 preview 成功回帖，并拿到 preview-mr-<iid> 的安装命令。

7. 合并功能 merge request 到 master。

8. 等待 PAC 自动创建 changeset-release/master 这条 release merge request。

9. 合并这条 release merge request 到 master。

10. 等待最后一条 PAC 流水线发布稳定版本。

快速入口：

• 手把手发版操作手册
• 流水线设计说明
• Edge PAC 排障速查
• Edge PAC 查询地址

What features are included?

1. Seamlessly open browser on development, it will try its best to reuse opened browser tab, so that no more redundant browser tabs will be opened like webpack-dev-server --open
2. If you've installed global console-cli, it will start the console backend server on development or serve on production mode. What means there will be no need to clone alauda-console and run make dev by yourself. Of course, you'll need to provide a console config file at ~/.consolerc.yml (or any other valid configuration supported by cosmiconfig) with authentication.oidc_client_secret, authentication.oidc_issuer_url and console.api_address.
3. Restart console service automatically on configuration changes.
4. Bundle with and inject service worker on production automatically.
5. Proxy to alauda console automatically on development and serve on production mode.
6. Provide html-minifier wrapper hm to minify index.html with common default options.
7. dev-console server for development which enables auto-login and no cross-origin (a console config like ~/.consolerc.yml is required)
8. Disable proxy api gateway for dev-console so that HTTP2 connection could be enabled for api gateway
9. Change alauda console environment quickly with cce command for dev-console or console-cli
10. Proxy with HTTPS support when running with ng serve --ssl

Upcoming Features

• HTTP2 support

Other incredible features from you.

Usage

Simplest

1. Install Dependencies:

   yarn add -D @alauda/custom-webpack @angular-builders/custom-webpack

2. Config angular.json:

   // production
   {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "node_modules/@alauda/custom-webpack"
       }
     }
   }

   // development
   {
     "builder": "@angular-builders/custom-webpack:dev-server"
   }

3. Config ~/.consolerc.yml (required for console-cli or dev-console)

   authentication:
     http_proxy: proxy_url
     https_proxy: proxy_url
     no_proxy: localhost,127.0.0.1,0.0.0.0
     login: login
     password: password
   console:
     api_address: api_address
     use_platform_api: false # optional, turn true to use /console-platform/api
   defaultUser: # optional
     login: login
     password: password
   envs:
     - name: env_name # optional
       api_address: api_address # required
       login: login # optional, will fallback to #defaultUser.login
       password: password # optional, will fallback to #defaultUser.password
       use_platform_api: false # optional

4. run ng serve, that's all, hope you like the development workflow.

Commands

Serve on production mode

yarn s

Minify index.html on building

// package.json
{
  "scripts": {
    "postbuild": "hm"
  }
}

Change console env

cce # you can choose to install `@alauda/custom-webpack` globally

? Which alauda console env do you want to use? …
a https://a.example.com (adminA)
b https://b.example.com (adminB)


cce - a # quickly change to specify env

List envs

cce list
activeEnv: a
┌─────────┬──────────┬─────────────────────────┬─────────────────┬───────────────────┬──────────────────┐
│ (index) │   name   │       api_address       │      login      │     password      │ use_platform_api │
├─────────┼──────────┼─────────────────────────┼─────────────────┼───────────────────┼──────────────────┤
│    0    │    'a'   │ 'https://a.example.com' │     'adminA'    │    'passwordA'    │                  │
│    1    │    'b'   │ 'https://b.example.com' │     'adminB'    │    'passwordB'    │       true       │
└─────────┴──────────┴─────────────────────────┴─────────────────┴───────────────────┴──────────────────┘

Advanced

If your need to custom the configuration again on top of @alauda/custom-webpack, you can simply provide a file named webpack.config.js, and config angular.json:

// production
{
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "webpack.config.js"
    }
  }
}

// webpack.config.js
import { createRequire } from 'node:module'

import customWebpack from '@alauda/custom-webpack'

const require = createRequire(import.meta.url)

export default config => {
  Object.assign(customWebpack(config).resolve.alias, {
    moment$: 'dayjs/esm',
    'moment-timezone$': require.resolve('./src/app/timezone'),
  })
  // mutate anything you want after calling `customWebpack(config)`
  return config
}

Environments

• ALAUDA_DISABLE_LAZY_COMPILE: Whether to disable lazy compile on development.
• ALAUDA_DISABLE_START_CONSOLE: Whether to disable starting console server automatically, not required if ALAUDA_ENABLE_DEV_CONSOLE is true
• ALAUDA_ENABLE_DEV_CONSOLE: Whether to enable dev console server automatically (highly unrecommended).
• ALAUDA_DISABLE_PROXY_API_GATEWAY: Whether to disable proxy api gateway, if true then the true api address will be used instead, ALAUDA_ENABLE_DEV_CONSOLE is required to take effect

Useful Internal API

1. startConsole:

   Control when or whether to start the (dev) console server in background on spawn mode.

   import { startConsole } from '@alauda/custom-webpack/start-console'

2. Anything you want us to expose?

PAC 流水线

如果你只想知道怎么发版，先看：

• 手把手发版操作手册

如果你想了解为什么流水线这样设计，再看：

• 流水线设计说明

v4 流水线基于原生 Tekton 和 Tekton Pipelines as Code 定义：

• PipelineRun: .tekton/pipeline-runs/custom-webpack.yaml
• Pipeline: .tekton/pipelines/custom-webpack-release.yaml

PipelineRun 名称是 custom-webpack，因此通用的 PAC 测试命令仍然可用：

/test custom-webpack
/test custom-webpack branch:master

发版相关的手工命令为：

/publish-preview

如果需要在 edge 环境继续排查 PAC 失败，直接看这份仓库内速查手册：

• .tekton/edge-pac-troubleshooting.md
• Edge PAC 查询地址

完整操作手册和设计说明已经拆到独立文档：

• 手把手发版操作手册
• 流水线设计说明

LICENSE

ISC © Alauda