Webpack 1 & 2 - The Complete Guide

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

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

Who this course is for:

  • 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.

Instructor

Software Engineer
  • 4.4 Instructor Rating
  • 6,487 Reviews
  • 71,356 Students
  • 13 Courses

Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder!

Expected Outcomes

  1. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  2. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  3. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  4. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  5. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  6. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  7. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  8. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  9. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  10. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  11. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Graduated with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, C#. Primarily I write Java and JavaScript focusing in Distributed Systems hosted on cloud. In my spare time, I love teaching, Photography, Baking, play Football. Yes I know, I am an all-rounder! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677848a1ddae065e',m:'08e203879cba39481d903eb2be4265f0e7127389-1627749787-1800-AWmUR+8P8y0YLr51Ii1zRj7Eo7W5jFdD1eosFXEgD9HF/Flh+qXYP0Keb9TTWqVKu5gRgIzc/VDaKOOFMMv0odtuc21b4zWjCPP1gKjR0ilC7NT7cufM/Clis2oRf4A+j0tgywnkZexTnFIUUDkWM68=',s:[0x9243c1295c,0xa390bd5f4a],}})();
  12. 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 Show more Show less Course content 16 sections • 80 lectures • 6h 24m total length Expand all sections Welcome 2 lectures • 3min Welcome Preview 01:09 Overview of what we are going to develop 01:23 Lets Understand Webpack 4 lectures • 9min Why 03:28 What is Webpack 03:17 Modular Approach Example Preview 01:23 Webpack Dependecy Graph 00:46 YARN Facebook Dependency Manager 2 lectures • 5min Introduction to YARN Preview 01:31 Enviroment set up with YARN and NodeJS 03:34 Webpack the Basics 6 lectures • 26min Hello World Preview 07:38 Exports and Require own Modules 04:09 Third Party Libaries 03:22 webpack.config.js 07:18 Exersise 00:49 Exersise Solution 02:26 Webpack Loaders 11 lectures • 1hr 1min Lets Understand Loaders 05:00 Coffee Script Preview 04:48 ES6 06:24 Query Object 02:30 Pre Loaders with ESLINT Preview 08:17 React JS 09:56 React Preset 04:10 Exercise i 04:21 Exercise i Solution 08:00 Exercise ii 01:05 Exercise ii Solution 06:32 Webpack Dev Server 2 lectures • 13min Webpack Dev Server Preview 02:54 Setting up Webpack Dev Server 10:20 Webpack & CSS 6 lectures • 37min Webpack & CSS Preview 05:01 Lets use CSS 09:19 Webpack & SASS 07:54 Bootstrap Preview 10:14 5 - Exersise with Fontawesome 02:48 Exercise with Fontawesome Solution 02:06 Resolve 6 lectures • 23min Overview Preview 02:31 How to remove file extensions 04:24 Alias 08:42 index.js "Special File Name" 04:25 Exercise 01:04 Exercise Solution 02:18 url loader, file loader & images 2 lectures • 17min Understanding File and URL Loader 05:44 Real example 10:55 Code Splitting 10 lectures • 56min Why Code Splitting 03:01 Multiple Entry Points Preview 01:18 Multiple Entry Points Part 2 07:07 CSS Code Splitting 03:32 CSS Code Splitting PART 2 07:30 Let's organise app folder structure 10:59 Vendor Code Splitting (Commons Chunk Plugin) 06:14 Provide Plugin 01:39 Exercise 02:15 Exercise Solution 12:53 6 more sections Requirements The basics of Javascript Description 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 Who this course is for: 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. Show more Show less Instructor Nelson Jamal Software Engineer 4.4 Instructor Rating 6,487 Reviews 71,356 Students 13 Courses Hi my name is Nelson and I am a software engineer . Gra