Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
LEARNING PATH: Webpack: Web Development with Webpack
Rating: 4.2 out of 5(14 ratings)
148 students

LEARNING PATH: Webpack: Web Development with Webpack

Boost your application's performance with Webpack
Created byPackt Publishing
Last updated 2/2018
English

What you'll learn

  • Learn to improve workflows with Webpack build tools
  • Know to handle assets inside your project
  • Explore on-demand code loading
  • Learn to create a message board website
  • Build your own modern stateful web applications
  • Explore how to track your application state in real time with Firebase
  • Use components as a unit of styling
  • Spread props to wrap components
  • Set up a Firebase project
  • Master deploying with Babel, code splitting, and ES2015
  • Learn how to add posts and styling

Explore related topics

Course content

2 sections • 41 lectures • 6h 39m total length

  • The Course Overview4:16

    This video will give you an overview about the course.                      

  • Installation and Setup10:32

    Install Webpack 2 into an empty project and start building the configuration from scratch.                         

  • Installation and Setup (Continued)10:46

    This video is the continuation of installation and setup process of Webpack 2.                         

  • Using Webpack in a Basic Application8:42

    Get our JavaScript to run in the browser by including it into and index.html file.

  • Using Webpack in a Basic Application (Continued)9:22

    This video is the continuation of how to use Webpack in a basic application.

  • Using Webpack in Your Web Application9:54

    In this video, we will see why we use Webpack and what are its advantages?

  • Running the Basic Application7:49

    Improve our workflow when writing code for our application.

  • Running the Basic Application (Continued)12:05

    This video is the continuation of running the basic application.

  • Bundling Process6:03

    Update our project to see JavaScript output.

  • Introduction to Loaders10:17

    Why are Loaders needed in our project?

    • Configure Loaders in Webpack config file
    • Install the Loader in our project
    • Check the output bundle 
  • Babel Setup and Configuration for ES201510:50

    How to add React to our project, how to enable ES2015 syntax.

  • Loader Examples6:06

    What are some useful Loaders?

  • Handling Stylesheets with Webpack13:08

    How to include CSS in our project?

    • Include CSS and SCSS into our application 
  • Handling Stylesheets with Webpack (Continued)14:53

    How utilize the CSS that has been included in our app?

    • Use style loader to add the CSS into the <Head> tag
    • Bund the app.css
    • Include app.css in our template 
  • Handling Images and Image Compression13:13

    How to handle image files in our application?

    • Including images in our project
    • Configuring the file loader
    • Using webpack-image-loader to compress/optimise images 
  • Configuring Public Paths6:40

    Are there any additional asset management options in Webpack?

    • Explore what are public paths
    • How to include public paths in our project 
  • Code Splitting - Introduction9:10

    How to improve performance and decrease load times when loading our bundles? 

    • A quick look at Entry Points
    • Code splitting with Entry Points 
  • Overriding the Dockerfile Defaults7:38

    How to improve performance after the code splitting has been done?

    • Using multiple entry points
    • Understanding Duplication when using multiple entry points
    • Preventing Duplication when using multiple entry points 
  • Code Splitting - Dynamic Imports7:48

    How to import large files?

    • Using Dynamic imports for large files
    • Implementing Dynamic imports
    • Using webpackChunkName for Dynamic imports 
  • Lazy Loading7:14

    How to prevent all JavaScript from loading at the beginning when page is accessed?

    • Prepare our project for lazy loading
    • Use import and webpackChunkName to Load our Module
    • Execute our module using webpackChunkName 
  • Webpack 3 Performance Improvements13:11

    Upgrading complex applications to Webpack 3 and the features available in Wepack 3.

Requirements

  • Prior knowledge of JavaScript and ES2015 syntax is assumed
  • Basic knowledge of React is needed

Description

Webpack is a module bundler for modern JavaScript applications. So if you are a developer and want to master Webpack in order to optimize the performance of your applications by improving workflows, then go for this Learning Path.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.  The highlights of this Learning Path are:

  • Learn how to install, configure, and run Webpack
  • Lean to apply on-demand code loading to your application
  • Learn how to improve your application by deploying to dynamic cloud hosting sites such as AWS

Let’s take a quick look at your learning journey. To start off with, you will be introduced to Webpack’s basic functionalities and discover how Webpack recursively builds a dependency graph that includes every module needed by your application and all those modules are then packaged into one or more bundles. You will learn many additional capabilities and features available in Webpack using loaders. You will also learn how to handle assets with CSS Loaders and deal with images and image compression. Further, you will explore the latest features provided by Webpack. Next, you will learn how to use Webpack with a real project. You will be provided with a dynamic responsive photo gallery application written in React, along with minimal to basic Webpack configuration and will be shown how to apply advanced features such as deploying with Babel, code splitting, and ES2015. Finally, you will be able to deploy your application to dynamic cloud hosting sites such as AWS in order to improve the existing application.

By the end of this Learning Path, you will have a deep understanding of Webpack and be able to create and deploy your applications.

Meet Your Expert:

We have the best works of the following esteemed author to ensure that your learning journey is smooth:

Colibri is a technology consultancy company founded in 2015 by James Cross and Ingrid Funie. The company works to help their clients navigate the rapidly changing and complex world of emerging technologies, with deep expertise in areas such as big data, data science, machine learning, and cloud computing. Over the past few years they have worked with some of the world's largest and most prestigious companies, including a tier-1 investment bank, a leading management consultancy group, and one of the world's most popular soft drinks companies, helping each of them to better make sense of its data and process it in more intelligent ways. The company lives by its motto: Data -> Intelligence -> Action. Alexandru Toea is a Senior Frontend developer. He is currently working with various startups specializing in building complex React applications for both public and internal use. Alexandru started his frontend developer career by building his school's websites around 10 years ago and has constantly advanced his knowledge of web technologies ever since. He is currently working with a technology startup to provide it with the tools required for quick expansion. He has spent the past four years working with React and Redux as well as building efficient real-time applications for both startups and corporate clients. He has a passion for efficient and clean code, while also staying on top of all the new developments in the front-end world. On the site he is also an Authorized Google Trainer, teaching for companies such as Solvay and Lucas Films.

Who this course is for:

  • This Learning Path is for developers who want to use Webpack for improving the performance of their applications. Developers who are interested in applying the principles of Webpack to large existing React applications can also take up this Learning Path.

Report abuse