This package provides an opportunity to modify @angular/cli project's webpack configuration without "ejecting".
For angular 6:
$ npx -p @angular/cli ng new my-project && cd my-project # create new Angular CLI project
$ npm i -D ngw # installing an improved cli-eject
$ ./node_modules/.bin/ngw --set-up # run via terminal in project root
Set up went successfully!For angular 5 use npm i -D ngw@angular5
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
So just make changes to the webpack config in appeared ngw.config.ts
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:
const PurifyCSSPlugin = require('purifycss-webpack');
const path = require('path');
const glob = require('glob');
export default function(config) {
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).