https://github.com/Angular-RU/angular-cli-webpack

Webpack configuration modifier for @angular/cli
https://github.com/Angular-RU/angular-cli-webpack

angular angular-cli cli coverage-status css ng ngw webpack webpack-configuration

Last synced: about 1 month ago
JSON representation

Webpack configuration modifier for @angular/cli

• Host: GitHub
• URL: https://github.com/Angular-RU/angular-cli-webpack
• Owner: Angular-RU
• License: mit
• Created: 2018-03-01T10:57:46.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-03T21:39:43.000Z (almost 6 years ago)
• Last Synced: 2024-09-30T00:22:13.872Z (about 1 month ago)
• Topics: angular, angular-cli, cli, coverage-status, css, ng, ngw, webpack, webpack-configuration
• Language: TypeScript
• Homepage:
• Size: 118 KB
• Stars: 67
• Watchers: 10
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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).

[![Build Status](https://api.travis-ci.org/Angular-RU/angular-cli-webpack.svg?branch=master)](https://travis-ci.org/Angular-RU/angular-cli-webpack)  [![npm version](https://badge.fury.io/js/ngw.svg)](https://badge.fury.io/js/ngw) [![dependencies Status](https://david-dm.org/angular-ru/angular-cli-webpack/status.svg)](https://david-dm.org/angular-ru/angular-cli-webpack)

[![Coverage Status](https://coveralls.io/repos/github/Angular-RU/angular-cli-webpack/badge.svg?branch=master)](https://coveralls.io/github/Angular-RU/angular-cli-webpack?branch=master) [![Coverage Status](https://img.shields.io/npm/dt/ngw.svg)](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 `compilerOptions.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)

    : devModificationsMerged(config);

  }

  ...

}

```