HOT

Webpack 1 & 2 – The Complete Guide

Development

Rating4.4
Enroll Now

Webpack 1 & 2 – The Complete Guide, available at $19.99, has an average rating of 4.4, with 80 lectures, based on 129 reviews, and has 674 subscribers.

You will learn about Understand all the concepts about Webpack Know key differences between Webpack 1 and Webpack 2 Understand how web browsers cache content Know how to use long term caching How to use css inside of Javascript Use ESLint in their projects Break web apps into multiple entry points Use React with Webpack Use Angular with Webpack Learn the importance of SourceMaps and how to use them Create optimized production builds Minify Javascript and CSS Embed images using DataURI Use YAML as config files Learn about the fastest package manager called YARN developed at Facebook Deploying Static content with Surge Use Webpack 1 Use Webpack 2 Use SASS Use CoffeeScript Use TypeScript This course is ideal for individuals who are This course is for students who know nothing about webpack. or This course is for students who want to better architect their web applications. or This course if for students who want to master webpack or This course is for students who wish to use languages other than javascript in their projects. i.e. typescript, CoffeeScript & ES6 or This course for students who want to use ReactJS for their next web application. It is particularly useful for This course is for students who know nothing about webpack. or This course is for students who want to better architect their web applications. or This course if for students who want to master webpack or This course is for students who wish to use languages other than javascript in their projects. i.e. typescript, CoffeeScript & ES6 or This course for students who want to use ReactJS for their next web application.

Enroll now: Webpack 1 & 2 – The Complete Guide

Summary

Title: Webpack 1 & 2 – The Complete Guide

Price: $19.99

Average Rating: 4.4

Number of Lectures: 80

Number of Published Lectures: 80

Number of Curriculum Items: 80

Number of Published Curriculum Objects: 80

Original Price: £34.99

Quality Status: approved

Status: Live

What You Will Learn

  • Understand all the concepts about Webpack
  • Know key differences between Webpack 1 and Webpack 2
  • Understand how web browsers cache content
  • Know how to use long term caching
  • How to use css inside of Javascript
  • Use ESLint in their projects
  • Break web apps into multiple entry points
  • Use React with Webpack
  • Use Angular with Webpack
  • Learn the importance of SourceMaps and how to use them
  • Create optimized production builds
  • Minify Javascript and CSS
  • Embed images using DataURI
  • Use YAML as config files
  • Learn about the fastest package manager called YARN developed at Facebook
  • Deploying Static content with Surge
  • Use Webpack 1
  • Use Webpack 2
  • Use SASS
  • Use CoffeeScript
  • Use TypeScript

Who Should Attend

  • This course is for students who know nothing about webpack.
  • This course is for students who want to better architect their web applications.
  • This course if for students who want to master webpack
  • This course is for students who wish to use languages other than javascript in their projects. i.e. typescript, CoffeeScript & ES6
  • This course for students who want to use ReactJS for their next web application.

Target Audiences

  • This course is for students who know nothing about webpack.
  • This course is for students who want to better architect their web applications.
  • This course if for students who want to master webpack
  • This course is for students who wish to use languages other than javascript in their projects. i.e. typescript, CoffeeScript & ES6
  • This course for students who want to use ReactJS for their next web application.

Webpack by far the best and greatest tool for front end development. It is a module bundler suitable for both large or small single-page web applications.

In this course you will fully understand and master all the aspects you need to know about this awesome tool. You will learn all the different configuration options allowing you customise Webpack to work the way you want for your own projects.

This is the most detailed course on Webpack ever created. You will learn both Webpack 1 and 2, so that you understand the key differences between the versions.

The topics you will are:

  • Running a Webpack build
  • Setting up loaders and presets
  • Configuring webpack-dev-server
  • CSS, SASS & Bootstrap
  • Adding entry points
  • Bundling vendor files
  • Production Builds
  • Long term caching
  • Deployment

Course Curriculum

Lecture 1: Welcome

Lecture 2: Overview of what we are going to develop

Chapter 1: Lets Understand Webpack

Lecture 1: Why

Lecture 2: What is Webpack

Lecture 3: Modular Approach Example

Lecture 4: Webpack Dependecy Graph

Chapter 2: YARN Facebook Dependency Manager

Lecture 1: Introduction to YARN

Lecture 2: Enviroment set up with YARN and NodeJS

Chapter 3: Webpack the Basics

Lecture 1: Hello World

Lecture 2: Exports and Require own Modules

Lecture 3: Third Party Libaries

Lecture 4: webpack.config.js

Lecture 5: Exersise

Lecture 6: Exersise Solution

Chapter 4: Webpack Loaders

Lecture 1: Lets Understand Loaders

Lecture 2: Coffee Script

Lecture 3: ES6

Lecture 4: Query Object

Lecture 5: Pre Loaders with ESLINT

Lecture 6: React JS

Lecture 7: React Preset

Lecture 8: Exercise i

Lecture 9: Exercise i Solution

Lecture 10: Exercise ii

Lecture 11: Exercise ii Solution

Chapter 5: Webpack Dev Server

Lecture 1: Webpack Dev Server

Lecture 2: Setting up Webpack Dev Server

Chapter 6: Webpack & CSS

Lecture 1: Webpack & CSS

Lecture 2: Lets use CSS

Lecture 3: Webpack & SASS

Lecture 4: Bootstrap

Lecture 5: 5 – Exersise with Fontawesome

Lecture 6: Exercise with Fontawesome Solution

Chapter 7: Resolve

Lecture 1: Overview

Lecture 2: How to remove file extensions

Lecture 3: Alias

Lecture 4: index.js "Special File Name"

Lecture 5: Exercise

Lecture 6: Exercise Solution

Chapter 8: url loader, file loader & images

Lecture 1: Understanding File and URL Loader

Lecture 2: Real example

Chapter 9: Code Splitting

Lecture 1: Why Code Splitting

Lecture 2: Multiple Entry Points

Lecture 3: Multiple Entry Points Part 2

Lecture 4: CSS Code Splitting

Lecture 5: CSS Code Splitting PART 2

Lecture 6: Let's organise app folder structure

Lecture 7: Vendor Code Splitting (Commons Chunk Plugin)

Lecture 8: Provide Plugin

Lecture 9: Exercise

Lecture 10: Exercise Solution

Chapter 10: Long Term Caching

Lecture 1: Overview

Lecture 2: Understanding Web Browsers Cache

Lecture 3: Hash

Lecture 4: Chunk Hash

Lecture 5: Html Webpack Plugin

Lecture 6: Exercise

Lecture 7: Exercise Sol

Chapter 11: Webpack 2

Lecture 1: Intro

Lecture 2: Installing Webpack 2

Lecture 3: Rules, Use & Options

Lecture 4: JSON loader & Enforce

Lecture 5: Extract Text Plugin with Webpack 2

Lecture 6: Bundling with Webpack 2 & Dev Server

Chapter 12: Production Builds

Lecture 1: Cleaning build folder before each build

Lecture 2: Environment Variables

Lecture 3: Modify Dev Environment

Lecture 4: Minify HTML – Production Environment

Lecture 5: Minify CSS – Production Environment

Lecture 6: Minify / Uglify Javascript – Production Environment

Lecture 7: Testing Dev Environment with Dev Server

Lecture 8: Testing Prod Environment (DEFINE PLUGIN & REACT PROD)

Lecture 9: Testing Prod Environment (UglifyJS & Mangle)

Chapter 13: Source Maps and Debugging

Lecture 1: Why Source Maps

Lecture 2: Source Maps – Development Environment

Lecture 3: Source Maps – Production Environment

Chapter 14: Deploying our app

Lecture 1: http-server Deployment

Lecture 2: Surge Deployment

Lecture 3: Installing Surge Globally

Chapter 15: Conclusion

Lecture 1: Final Say

Instructors

Rating Distribution

  • 1 stars: 1 votes
  • 2 stars: 4 votes
  • 3 stars: 7 votes
  • 4 stars: 37 votes
  • 5 stars: 80 votes

Frequently Asked Questions


How long do I have access to the course materials?


You can view and review the lecture materials indefinitely, like an on-demand channel.


Can I take my courses with me wherever I go?


Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

You may also like

Google Shopping Ads Digital Marketing Course

Complete Copywriting System : write to sell with ease

Product Positioning Masterclass: Unlock Market Traction