README
@alauda/custom-webpack
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?
@babel/polyfill
automatically according tobrowserslist
of course.- 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
- 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 runmake 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) withauthentication.oidc_client_secret
,authentication.oidc_issuer_url
andconsole.api_address
. - Restart console service automatically on configuration changes.
- Bundle with and inject service worker on production automatically.
- Proxy to alauda console automatically on development and
serve
on production mode. - Provide
html-minifier
wrapperhm
to minifyindex.html
with common default options. dev-console
server for development which enables auto-login and no cross-origin (a console config like~/.consolerc.yml
is required)- disable proxy api gateway for
dev-console
so that http2 connection could be enabled for api gateway
Upcoming Features
Other incredible features from you.
Usage
Simplest
Install Dependencies:
yarn add -D @alauda/custom-webpack @angular-builders/custom-webpack
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" }
Config
~/.consolerc.yml
(required forconsole-cli
ordev-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
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"
}
}
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