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

A Webpack 5 boilerplate with Webpack-Dev-Server 4 and Angular 8 using Sass PostCSS and Bootstrap and an optimized production build
https://github.com/persteenolsen/webpack-5-angular-boilerplate

angular bootstrap typescript webpack

Last synced: 29 days ago
JSON representation

A Webpack 5 boilerplate with Webpack-Dev-Server 4 and Angular 8 using Sass PostCSS and Bootstrap and an optimized production build

• Host: GitHub
• URL: https://github.com/persteenolsen/webpack-5-angular-boilerplate
• Owner: persteenolsen
• Created: 2022-01-07T18:55:27.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-02-14T13:05:06.000Z (12 months ago)
• Last Synced: 2024-11-07T09:46:22.349Z (3 months ago)
• Topics: angular, bootstrap, typescript, webpack
• Language: TypeScript
• Homepage: https://webpack5angular.persteenolsen.com/
• Size: 371 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Webpack 5 Angular 8 boilerplate

Webpack 5 boilerplate using Webpack-devserver 4 and Angular 8, 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 / 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 / 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

- [`ts-loader`](https://www.npmjs.com/package/ts-loader) - Loading typescript files and compile 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.

- [`to-string-loader`](https://www.npmjs.com/package/to-string-loader) - Helps loading scss files imported in components

- [`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

- [`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).