@alauda/custom-webpack

@alauda/custom-webpack

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

• What and Why
• What features are included?
• Upcoming Features
• Usage
  • Simplest
  • Advanced
  • Environments
  • Useful Internal API
• LICENCE

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 service worker support on production automatically.

Upcoming Features

1. Proxy to alauda console automatically on development and serve on production mode.
2. Provide html-minifier wrapper to minify index.html with common default options and simple cli hm.
3. Provide common simple serve command for running on production mode.
4. Include service worker into entry automatically.
5. 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. run ng serve, that's all, hope you like the development workflow.

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
const customWebpack = require('@alauda/custom-webpack')

module.exports = 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: If you prefer not using lazy compile mode on development.
• ALAUDA_DISABLE_START_CONSOLE: If you prefer running console server manually (highly unrecommended).

Useful Internal API

1. startConsole:

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

   const { startConsole } = require('@alauda/custom-webpack/lib/start-console')
   

2. Anything you want us to expose?

LICENCE

ISC © Alauda