ngw
Version:
Provides an opportunity to overload webpack config for angular-cli applications
70 lines (56 loc) • 2.82 kB
Markdown
# Angular CLI Webpack (ngw)
> This package provides an opportunity to modify @angular/cli project's webpack configuration without ["ejecting"](https://github.com/angular/angular-cli/wiki/eject).
[](https://travis-ci.org/Angular-RU/angular-cli-webpack) [](https://badge.fury.io/js/ngw) [](https://david-dm.org/angular-ru/angular-cli-webpack)
[](https://coveralls.io/github/Angular-RU/angular-cli-webpack?branch=master) [](https://npm-stat.com/charts.html?package=ngw&from=2017-01-12)
## Installation
For angular 6/7:
```bash
$ 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`
## Usage:
Last command installation (ngw --set-up) makes three things:
1) Changes scripts in package.json that starts from `ng ` to `ngw `
2) Creates file `ngw.config.ts` in project root where you can redefine `webpack.Configuration` used by `@angular/cli`
3) Sets `complierOptions.module = "commonjs"` property in `tsconfig.json`
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.
## Example
#### Removes unused selectors from your CSS
This little piece of code in your ngw.config [removes unused selectors from your CSS:](https://github.com/webpack-contrib/purifycss-webpack)
```typescript
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;
}
```
#### Debugging
You may like to debug your configuration.
This can be done with [ndb](https://github.com/GoogleChromeLabs/ndb) package.
1) Make sure that your development environment meets the requirements of `ndb`
2) `npm i -g ndb`
3) Add `debugger` keyword in `ngw.config.ts`
4) `ndb npm run start`
#### Prod and dev mode modifications (ngw.config.ts)
```typescript
const isProduction = process.argv.indexOf('--prod') !== -1;
export default function(config, options) {
//common config modification
...
config = isProduction
? productionModificationsMerged(config)
: devModificationsChane(config);
}
...
}
```