Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/persteenolsen/webpack-4-angular-boilerplate

A boilerplate for Webpack 4 with Angular 7
https://github.com/persteenolsen/webpack-4-angular-boilerplate

angular typescript webpack

Last synced: 29 days ago
JSON representation

A boilerplate for Webpack 4 with Angular 7

Awesome Lists containing this project

README

        

# Webpack 4 Angular 7 boilerplate

Webpack 4 boilerplate using Angular 7, Sass and Bootstrap with a hot dev server and an optimized production build.

# Usage

# Development server:
npm start-dev

You can view the development server at `localhost:8080`.

# Production build:
npm run build:prod

# To view the build use http-server:
npm prod

# Features

- [webpack](https://webpack.js.org/)
- [Angular](https://angular.io/)
- [Sass](https://sass-lang.com/)
- [Bootstrap](https://getbootstrap.com/) - Used here by CDN

# Dependencies / devDependencies

# Different libraries

- [`core-js`](https://www.npmjs.com/package/core-js) - Modular standard library for JavaScript
- [`rxjs`](https://angular.io/guide/rx-library) - Reactive Extensions for JavaScript
- [`zone.js`](https://www.npmjs.com/package/zone.js) - Angular introduced Zone.js to handle change detection in GUI

# webpack

- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.
- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack
- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack
- [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify development/production configuration
- [`cross-env`](https://github.com/kentcdodds/cross-env) - Cross platform configuration

# Angular / Compiler

- [`@angular/compiler`] (https://angular.io/guide/angular-compiler-options) - Angular compiler
- [`@angular/compiler-cli`] (https://angular.io/guide/angular-compiler-options) - Angular compiler command line interfaces with options

# Angular / Packages

- [`@angular/common`] (https://angular.io/api/common) - Implements fundamental Angular framework functionality
- [`@angular/animations`] (https://angular.io/api/animations) - Implements how HTML animates in an Angular specific way
- [`@angular/core`] (https://angular.io/api/core) - Implements core Angular functionality and low level services
- [`@angular/forms`] (https://angular.io/api/forms) - Implements core Angular form functionality like user input
- [`@angular/router`] (https://angular.io/api/router) - Implements core Angular router functionality
- [`@angular/upgrade`] (https://angular.io/api/upgrade) - Implements functionality for upgrading Angular JS to Angular

# Angular / Services

- [`@angular/http`] (https://angular.io/guide/http) - Communicating with backend services using HTTP

# Angular / TypeScript Loaders

- [`angular-router-loader`](https://www.npmjs.com/package/angular-router-loader/) - Load String based modules by Angular Routing
- [`angular2-template-loader`](https://www.npmjs.com/package/angular2-template-loader/) - Loader that inline HTML and css in Angular
- [`awesome-typescript-loader`](https://www.npmjs.com/package/awesome-typescript-loader/) - Loading typescript files to be transplid to JS

# Some other Loaders

- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS
- [`node-sass`](https://github.com/sass/node-sass) - Node Sass
- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports
- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM
- [`html-loader`](https://webpack.js.org/loaders/url-loader/) - Export HTML as String.
- [`url-loader`](https://webpack.js.org/loaders/url-loader/) - Loading base64 files -> url
- [`file-loader`](https://webpack.js.org/loaders/file-loader/) - Resolve files by import and require

# Plugins

- [`clean-webpack-plugin`](https://www.npmjs.com/package/clean-webpack-plugin) - Remove/clean build folders
- [`uglifyjs-webpack-plugin`](https://www.npmjs.com/package/uglifyjs-webpack-plugin) - Minifies and uglyfies the bundle
- [`html-webpack-plugin`](https://webpack.js.org/plugins/html-webpack-plugin/) - Generate HTML files from template

# Author

- Per Olsen

# License

This project is open source and available under the [MIT License](LICENSE).