Newly Practicing Mortician

    ngw
    TypeScript icon, indicating that this package has built-in type declarations

    7.0.0 • Public • Published

    Angular CLI Webpack (ngw)

    This package provides an opportunity to modify @angular/cli project's webpack configuration without "ejecting".

    Build Status npm version dependencies Status Coverage Status Coverage Status

    Installation

    For angular 6/7:

    $ 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:

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

     
    const isProduction = process.argv.indexOf('--prod') !== -1;
     
    export default function(config, options) {
      //common config modification
      ...
      config = isProduction
        ? productionModificationsMerged(config)
        : devModificationsChane(config);
      }
      ...
    }

    Keywords

    none

    Install

    npm i ngw

    DownloadsWeekly Downloads

    122

    Version

    7.0.0

    License

    MIT

    Unpacked Size

    13.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • redsool