Course image for Webpack 4 - First Steps

Webpack 4 - First Steps

Use Webpack to bundle and automate a lot of regular JavaScript workflow task and become a powerful JS developer!

1 hours+ of total content
0.0
0 ratings
172 developers learning
Course Creator: Mehul Mohan

Hang on...

Goals

  • Introduction to Webpack
  • Various webpack options provided
  • Configuring webpack from scratch
  • Creating production ready apps with webpack
  • Adding custom loaders and plugins

Description

Webpack is a module bundler which is much more than just a bundler. It allows you to automate a lot of moving pieces of your project (like prefixing CSS styles, optimizing bundles, writing in TypeScript and Sass and compiling down to browser version, etc.)

In this complete series, we're going to get hands on experience with Webpack and how to start working on real projects using Webpack as the technology.

Once configured, webpack gives you to ability to truly focus only on the code quality you write and leave rest of the optimization and code work on it. However it is important to configure it correctly and know at every moment which configuration does what. In this whole series, we're going on a joy ride with webpack.

Course Structure

30 lectures 01:52:59 total duration

All Videos

(30 lectures • 01 hours and 52 minutes)
  Introduction (Watch video)
01:36
  What is Webpack (Watch video)
02:12
  Webpack vs Grunt (Watch video)
02:28
  Webpack Hello World on zero configuration 
04:37
  Config introduction 
01:36
  Webpack mode 
02:31
  Multiple entry points and basic usage 
02:47
  fileName 
02:31
  path 
02:31
  Available placeholders 
04:38
  publicPath 
04:36
  library and libraryTarget 
05:00
  Webpack dev server 
05:37
  devServer writeToDisk 
03:47
  Hot reloading 
05:27
  Intro to plugins 
01:17
  Setting up cool plugins with webpack 
09:15
  Introduction 
03:18
  Adding a loader 
05:35
  Intro to project 
00:50
  Setting up project dependencies 
03:56
  Writing loader configuration 
04:51
  Setting up tsconfig.json 
01:39
  Hello World with custom configuration 
08:26
  Creating a simple calculator project 
01:28
  Adding hot module replacement to it 
03:38
  Aliases in webpack 
05:12
  Creating production build 
05:16
  Final words 
01:24
  Test Lab (Practice concept)
05:00

Course Reviews

No reviews yet

Your Course Instructor

Course Instructor Image

Mehul Mohan

Full-stack developer and security researcher

I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)
codedamn logo

We ♥ quality. And we would love to see your growth. Hence, codedamn comes with a pro plan for advanced and accelerated learning!

Free

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice

Pro

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice
Try codedamn Pro (7 day free refund)