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!

4.9
(14 ratings)
250 enrolled
Excellent Rating
Course Instructor: Mehul Mohan

Course Outcomes

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

Course Structure

30 lectures1h 52m total duration

  Introduction 
1min
  What is Webpack 
2min
  Webpack vs Grunt 
2min
  Webpack Hello World on zero configuration 
4min
  Config introduction 
1min
  Webpack mode 
2min
  Multiple entry points and basic usage 
2min
  fileName 
2min
  path 
2min
  Available placeholders 
4min
  publicPath 
4min
  library and libraryTarget 
5min
  Webpack dev server 
5min
  devServer writeToDisk 
3min
  Hot reloading 
5min
  Intro to plugins 
1min
  Setting up cool plugins with webpack 
9min
  Introduction 
3min
  Adding a loader 
5min
  Intro to project 
0min
  Setting up project dependencies 
3min
  Writing loader configuration 
4min
  Setting up tsconfig.json 
1min
  Hello World with custom configuration 
8min
  Creating a simple calculator project 
1min
  Adding hot module replacement to it 
3min
  Aliases in webpack 
5min
  Creating production build 
5min
  Final words 
1min

About This Course

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.

Used by learners at

Microsoft
Amazon
Google

This course is interactive

Interactive courses include hands-on coding exercises to practice as you learn. You practice exercises in a VS Code like IDE without any installation/setup.

Screenshot of codedamn IDE

Featured Review

Profile picture for Kevin K.
Kevin K.

@kevink520

5.0
The course covers Webpack in detail.

Student Feedback

4.9
Course Rating

93%

7%

0%

0%

0%

Reviews

Profile picture for Junaid Momin
Junaid Momin
Jan 27, 2023
Awesome
Profile picture for Nilay Chikani
Nilay Chikani
Oct 07, 2022
Information tutorial, thanks.!!
Profile picture for jack do
jack do
Apr 24, 2022
this awesome
Profile picture for Aditya Santra
Aditya Santra
Apr 23, 2022
very helpful
Profile picture for Syed Rahman
Syed Rahman
Mar 18, 2022
Great course !!!

Course Instructor

Mehul Mohan
Building coding courses on codedamn
Mehul Mohan
4.6 Instructor rating
23.3k Ratings
228.2k Students
47 Courses

Me alongside a team of developers, creators, designers are building the best interactive programming courses here.View profile

Upgrade to a Pro account and unlock more courses for accelerated learning. Instant feedback, interactive learning and more.

Free

  • 100+ coding courses
  • Certificate of completion
  • Hands-on practice
  • 24x7 doubt solving with AI
  • 100+ projects to practice
  • In-depth project feedback
  • AWS cloud sandboxes

Pro

  • 100+ coding courses
  • Certificate of completion
  • Hands-on practice
  • 24x7 doubt solving with AI
  • 100+ projects to practice
  • In-depth project feedback
  • AWS cloud sandboxes
Upgrade To Pro