项目作者: Angular-RU

项目描述 :
Webpack configuration modifier for @angular/cli
高级语言: TypeScript
项目地址: git://github.com/Angular-RU/angular-cli-webpack.git
创建时间: 2018-03-01T10:57:46Z
项目社区:https://github.com/Angular-RU/angular-cli-webpack

开源协议:MIT License

下载


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:

  1. $ npx -p @angular/cli ng new my-project && cd my-project # create new Angular CLI project
  2. $ npm i -D ngw # installing an improved cli-eject
  3. $ ./node_modules/.bin/ngw --set-up # run via terminal in project root
  4. 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:

  1. const PurifyCSSPlugin = require('purifycss-webpack');
  2. const path = require('path');
  3. const glob = require('glob');
  4. export default function(config) {
  5. config.plugins.push(
  6. new PurifyCSSPlugin({
  7. paths: glob.sync(path.join(__dirname, '**/*.html'))
  8. })
  9. );
  10. return config;
  11. }

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)

  1. const isProduction = process.argv.indexOf('--prod') !== -1;
  2. export default function(config, options) {
  3. //common config modification
  4. ...
  5. config = isProduction
  6. ? productionModificationsMerged(config)
  7. : devModificationsMerged(config);
  8. }
  9. ...
  10. }