Next Phenomenal Microbrewery

    TypeScript icon, indicating that this package has built-in type declarations

    4.6.3 • Public • Published


    Custom webpack configuration with babel support for polyfills and other great features

    What and Why

    This package is built for adding @babel/polyfill support for projects on top of @angular/cli at the beginning and it does work.

    And after practicing, we decided to add more common features into this package just because we're so lazy to repeat anything related to bundle and development.

    What features are included?

    1. @babel/polyfill automatically according to browserslist of course.
    2. 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
    3. 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.
    4. Restart console service automatically on configuration changes.
    5. Bundle with and inject service worker on production automatically.
    6. Proxy to alauda console automatically on development and serve on production mode.
    7. Provide html-minifier wrapper hm to minify index.html with common default options.
    8. dev-console server for development which enables auto-login and no cross-origin (a console config like ~/.consolerc.yml is required)
    9. Disable proxy api gateway for dev-console so that HTTP2 connection could be enabled for api gateway
    10. Change alauda console environment quickly with cce command for dev-console or console-cli
    11. Proxy with HTTPS support when running with ng serve --ssl

    Upcoming Features

    • HTTP2 support

    Other incredible features from you.



    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)

        http_proxy: proxy_url
        https_proxy: proxy_url
        no_proxy: localhost,,
        login: login
        password: password
        api_address: api_address
      defaultUser: # optional
        login: login
        password: password
        - 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
    4. run ng serve, that's all, hope you like the development workflow.


    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 (adminA)
    b (adminB)


    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


    • ALAUDA_DISABLE_CACHE: Whether to enable cacheDirectory for babel-loader
    • 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?


    ISC © Alauda




    npm i @alauda/custom-webpack

    DownloadsWeekly Downloads






    Unpacked Size

    116 kB

    Total Files


    Last publish


    • ancientrs
    • tzfeng
    • zhangmq
    • edisonqtx
    • jounqin
    • frozenwings
    • chaos1ee
    • alaudafrontend
    • shuxun.yin
    • zangguodong
    • zchange