This package provides an opportunity to modify @angular/cli project's webpack configuration without "ejecting".
$ npm install -g @angular/cli # before usage you need install cli
$ ng new my-project && cd my-project # go into any project on angular
$ npm install ngw --save-dev # installing an improved cli-eject
$ ./node_modules/.bin/ngw --set-up # run via terminal in project root
Set up went successfully!Now you can use an easy configuration to configure your webpack for dev and prod mode (ngw.config.ts)
import * as webpack from 'webpack';
import { WebpackConfigOptions as ConfigOptions } from '@angular/cli/models/webpack-config';
import { BuildOptions } from '@angular/cli/models/build-options';
export type Configuration = webpack.Configuration;
const DEFAULT_COMMAND = process.argv[2];
export default function (config: Configuration, options: ConfigOptions<BuildOptions>, argv) {
console.log('For modify webpack build, you can usage ngw.config.ts');
const command = argv || DEFAULT_COMMAND;
return config;
}Last command installation (ngw --set-up) makes two things:
- Changes scripts in package.json that starts from
ngtongw - Creates file
ngw.config.tsin project root where you can redefinewebpack.Configurationused by@angular/cli
You may like to do npm i -D @types/webpack for better experience.
This little piece of code in your ngw.config removes unused selectors from your CSS:
import * as webpack from 'webpack';
import { WebpackConfigOptions } from '@angular/cli/models/webpack-config';
import { BuildOptions } from '@angular/cli/models/build-options';
const PurifyCSSPlugin = require('purifycss-webpack');
const path = require('path');
const glob = require('glob');
export default function(config: webpack.Configuration) {
config.plugins.push(
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, '**/*.html'))
})
);
return config;
}export default function(config, options) {
//common config modification
...
switch(options.buildOptions.enviroment) {
case 'prod':
config = productionModificationsMerged(config);
break
case 'dev':
//etc
}
}For complex cases it's more appropriate to use ng eject command. Default building process could be changed significanlty in further @angular/cli releases so your customization could break (or became broken).
- Common recepies
- Ability to write/publish recepies
- Isolated webpack changes
- Separate Dev and Prod configs