O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Web Development with Angular and Webpack 4

Video Description

Build powerful and effective websites using Angular and Webpack 4

About This Video

  • Elevate your Angular experience to an advanced level and build your first application in Angular 6.0
  • Utilize Webpack with Angular to bundle and compile code
  • Make the best use of the Webpack using hot reloading

In Detail

Have you ever thought of tackling the hassle of managing multiple JavaScript files for use in a browser? Something which can help you transforming, bundling or packaging about any resource or asset. The exciting new features of Webpack 4 will simplify your development experience with a list of features that cater to all kinds of JavaScript apps.

You will begin the course by writing Webpack without configuration and setting up the environment to build an application.

You’ll learn to enhance the application by working with plugins, middleware, and loaders. Further, you’ll gain experience with bundling, transpiling, debugging, and testing your application written in Angular 6.0.

You will learn some advanced Webpack features—for example, working with different transpilers such as TypeScript and Babel to achieve ES6 transpilation with some middleware, making your application production-ready. By the end of the course you will have a better understanding of Webpack, you will be confident, and will have built your own web application using Angular 6 and Webpack 4, so you can apply yourself to practical web development projects.

All the code and supporting files for this course are available on Github at https://github.com/PacktPublishing/Web-Development-with-Angular-Webpack-4

Table of Contents

  1. Chapter 1 : Getting Started with Webpack 4.0 and Angular 6
    1. The Course Overview 00:02:39
    2. Understanding Webpack First 00:05:49
    3. Understanding Webpack 4 with What Is New Here? 00:05:14
    4. Running Webpack 4 with an Angular 6 App 00:04:33
    5. Adding Loaders and Plugins for Angular 6 App 00:04:19
    6. Adding Loaders for Angular 6 App 00:05:44
    7. Adding Plugins for Our Angular 6 App and Running App 00:06:43
    8. Adding Wings to Angular 6 App with Webpack 4 00:04:08
  2. Chapter 2 : Explore Webpack 4.0 Plugins and Middleware
    1. Advanced Builds with Webpack 4 and Angular 6 00:07:05
    2. Organizing Files and Folders for Angular Build 00:03:46
    3. Internal Implementation of CSS and Style Loaders with SASS and LESS 00:04:51
    4. Adding Images and Fonts to Your Build 00:04:41
    5. Using Different Webpack Tools 00:05:55
    6. Live Reload/Hot Module Replacement with Webpack Middleware 00:07:18
    7. Adding Webpack Dev Middleware with Angular App 00:08:10
    8. Creating a Custom Loader with Plugins 00:03:55
  3. Chapter 3 : Bundling, Transpiling, and Debugging Webpack
    1. Bundling Without Config or with Custom webpack.config.js 00:04:34
    2. Run Webpack on cmd to Create bundle.js 00:05:40
    3. Transpilation of ES6 Using Babel and Webpack –Part 1 00:05:12
    4. Transpilation of ES6 – Part 2 00:05:09
    5. Webpack Hot Middleware 00:05:42
    6. Webpack HMR API for Different Apps 00:03:31
  4. Chapter 4 : Webpack Dev Essentials
    1. Bundling or Setting Webpack with mergeMap 00:05:19
    2. Understanding source-map and html-webpack-plugin 00:03:39
    3. Understanding Progress Plugin and uglify js Plugins 00:04:20
    4. Hot Reloading with Webpack dev-server 00:05:32
    5. Webpack Compression and Extracting the Mini CSS Plugin 00:05:47
  5. Chapter 5 : Optimizing Production Using Webpack
    1. Optimizing for Production Builds – Part 1 00:05:34
    2. Optimizing for Production Builds – Part 2 00:04:37
    3. Optimizing the Angular App for Production – Part 1 00:07:44
    4. Optimizing the Angular App for Production – Part 2 00:04:57
    5. Brotli Compression on Webpack Build 00:04:50