Angular-RU / Angular Cli Webpack
Licence: mit
Webpack configuration modifier for @angular/cli
Stars: ✭ 72
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular Cli Webpack
Wpk
a friendly, intuitive & intelligent CLI for webpack
Stars: ✭ 232 (+222.22%)
Mutual labels: webpack, webpack-configuration, cli
Angular Librarian
An Angular 2+ scaffolding setup for creating libraries
Stars: ✭ 92 (+27.78%)
Mutual labels: webpack, webpack-configuration, cli
Nest Angular
NestJS, Angular 6, Server Side Rendering (Angular Universal), GraphQL, JWT (JSON Web Tokens) and Facebook/Twitter/Google Authentication, Mongoose, MongoDB, Webpack, TypeScript
Stars: ✭ 307 (+326.39%)
Mutual labels: webpack, angular-cli
Haul
Haul is a command line tool for developing React Native apps, powered by Webpack
Stars: ✭ 3,581 (+4873.61%)
Mutual labels: webpack, cli
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+829.17%)
Mutual labels: webpack, angular-cli
Bruce Cli
A React/Vue application automation build scaffold with zero configuration out of the box
Stars: ✭ 283 (+293.06%)
Mutual labels: webpack, cli
Angular Ssr
Angular 4+ server-side rendering solution compatible with @angular/material, jQuery, and other libraries that touch the DOM (as well as providing a rich feature set!)
Stars: ✭ 283 (+293.06%)
Mutual labels: cli, angular-cli
X Build
🖖 Customizable front-end engineering scaffolding tools
Stars: ✭ 436 (+505.56%)
Mutual labels: webpack, cli
Webpack Config
Helps to load, extend and merge webpack configs
Stars: ✭ 244 (+238.89%)
Mutual labels: webpack, webpack-configuration
Feflow
🚀 A command line tool aims to improve front-end engineer workflow and standard, powered by TypeScript.
Stars: ✭ 942 (+1208.33%)
Mutual labels: webpack, cli
Initior
A command line application that let's you initialize your new projects the right way, replaces npm and yarn's init 🎆
Stars: ✭ 17 (-76.39%)
Mutual labels: webpack, cli
Angular Builders
Angular build facade extensions (Jest and custom webpack configuration)
Stars: ✭ 843 (+1070.83%)
Mutual labels: webpack, angular-cli
Angular Native Seed
Build web apps and NativeScript applications from one codebase using the AngularCLI.
Stars: ✭ 271 (+276.39%)
Mutual labels: webpack, angular-cli
Vue Cli Plugin Electron Builder
Easily Build Your Vue.js App For Desktop With Electron
Stars: ✭ 3,549 (+4829.17%)
Mutual labels: webpack, cli
Frontend Webpack Boilerplate
Simple starter webpack 5 project template supporting SASS/PostCSS, Babel ES7, browser syncing, code linting. Easy project setup having multiple features and developer friendly tools.
Stars: ✭ 242 (+236.11%)
Mutual labels: webpack, webpack-configuration
Cc
一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面(没基础的同学请先自学基础,谢谢!)
Stars: ✭ 416 (+477.78%)
Mutual labels: webpack, angular-cli
Webpack Chain
A chaining API to generate and simplify the modification of Webpack configurations.
Stars: ✭ 2,821 (+3818.06%)
Mutual labels: webpack, webpack-configuration
Netlify Builder
Deploy your Angular app to netlify from CLI
Stars: ✭ 60 (-16.67%)
Mutual labels: cli, ng
Angular CLI Webpack (ngw)
This package provides an opportunity to modify @angular/cli project's webpack configuration without "ejecting".
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 [email protected]
Usage:
Last command installation (ngw --set-up) makes three things:
- Changes scripts in package.json that starts from
ng
tongw
- Creates file
ngw.config.ts
in project root where you can redefinewebpack.Configuration
used by@angular/cli
- Sets
compilerOptions.module = "commonjs"
property intsconfig.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.
- Make sure that your development environment meets the requirements of
ndb
npm i -g ndb
- Add
debugger
keyword inngw.config.ts
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)
: devModificationsMerged(config);
}
...
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].