Webpack 5 and Vite: A New Way to Learn - Active Thinking

Focused View

OnlyKiosk Tech

4:27:27

364 View

01 - Webpack 5 Bundling, Tree Shaking, Lazy Loading, Loaders, Plugins, Asset Modules

001 Active Thinking Exploring Webpack By Guessing.mp4

15:49

001 webpack-intro.zip

002 Active Thinking Reverse Engineering the Webpack Config File.mp4

11:17

002 webpack-intro-config-reserve.zip

003 Webpack Introduction (the Traditional Approach).mp4

09:12

003 wp-intro-1.zip

004 Webpack Watch & WatchOptions.mp4

06:04

004 webpack-watchOptions.zip

005 Webpack Dev Server.mp4

05:02

005 webpack-devServer.zip

006 Static Files.mp4

04:52

006 webpack-devServer-static.zip

007 Deduplication.mp4

03:31

007 wp-opt-default.zip

008 Multiple Entry Points.mp4

04:12

008 wp-multi-deDup.zip

009 Tree Shaking.mp4

02:52

009 wp-opt-treeShaking.zip

010 Side Effects.mp4

04:08

010 wp-sideEffect.zip

011 ES6 Dynamic Module Crash Course.mp4

02:43

011 es-async.zip

012 Lazy Loading.mp4

06:42

012 wp-lazyLoad.zip

013 splitChunksPlugin.mp4

06:57

013 wp-splitChunksPlugin.zip

014 htmlWebpackPlugin.mp4

05:36

014 wp-htmlWebpackPlugin.zip

015 htmlWebpackPlugin Multiple Pages.mp4

05:46

015 wp-htmlWebpackPlugin-multiple-pages.zip

016 Webpack.ProvidePlugin.mp4

04:07

016 wp-providePlugin.zip

017 Webpack Asset Modules.mp4

08:19

017 wp-asset-modules.zip

018 Asset.mp4

03:08

018 wp-type-asset.zip

019 Asset Modules Public Path.mp4

06:01

019 wp-asset-modules-misc.zip

020 CSS.mp4

03:35

020 wp-CSS.zip

021 Minimizing CSS.mp4

03:48

021 wp-CSS-mini.zip

022 On-demand CSS.mp4

03:35

022 wp-CSS-chunk.zip

023 SASS.mp4

02:01

023 wp-CSS-SASS.zip

024 PublicPath and Deployment.mp4

11:21

024 wp-publicPath.zip

025 Separate Config Files.mp4

09:09

025 wp-merge-config.zip

026 Challenge HTML File as Static Asset.mp4

06:23

026 wp-html.zip

02 - Vite

001 Vite Introduction Making Educated Guesses Based on Webpack Experience.mp4

11:37

001 vite-intro.zip

002 Vite Lazy Loading Proving a Hypothesis.mp4

03:06

002 vite-onDemand.zip

003 Vite Asset Files File-loader.mp4

04:34

003 vite-asset-file.zip

004 Vite Asset Files RAW and Data URI.mp4

08:07

004 vite-asset-raw-url.zip

005 Vite Asset Files Public Directory and HTML Files.mp4

03:15

005 vite-asset-HTML.zip

006 CWD.mp4

03:57

006 vite-root-intro.zip

007 Vite Config File Custom Vite Root.mp4

10:03

007 vite-config-root.zip

008 Vite Config File Custom Input and Output.mp4

03:47

008 vite-config-io.zip

009 Vite Config File Split CSS and Control Data URI.mp4

02:49

009 vite-config-misc.zip

010 Vite Config File Base Path.mp4

03:51

010 vite-config-base.zip

03 - Library with Webpack & Vite

001 Webpack Library Preparation.mp4

07:44

001 wp-lib-intro.zip

002 Webpack Library Type.mp4

07:23

002 wp-lib-type.zip

003 Webpack External Dependencies.mp4

07:07

004 Vite Library All in One.mp4

10:44

004 vite-library.zip

04 - Webpack Module Federation

001 Preparation Lerna.mp4

05:15

002 The REMOTE Project.mp4

06:18

002 module-federation-REMOTE.zip

003 The LOCAL Project.mp4

07:47

003 module-federation-LOCAL.zip

004 Shared Dependencies.mp4

03:53

004 module-federation-SHARE.zip

Description

Learning by "Guessing"; Understanding Webpack Better by Learning Vite; Mastering Vite based on Webpack Experience.

What You'll Learn?

Master Webpack 5 and Webpack DevServer
Master Vite
Master Webpack and Vite library
Master Webpack Module Federation

Who is this for?

JavaScript developers who want to learn Webpack 5

JavaScript developers who want to learn Vite

Webpack developers who want to learn Webpack module federation

What You Need to Know?

Basic JavaScript knowledge

Basic NPM knowledge

More details

Description
This course teaches both Webpack and Vite, but we did not just stack a Webpack course and a Vite course together.
We want to help you master Webpack with less time and effort. This is why we add a Vite course.
Studying Webpack lays the foundation for the following Vite study. Your Webpack experience enables you to instantly understand similar concepts in Vite. As a result, you can master Vite with much less time and effort.
Meanwhile, learning Vite gives you the perfect opportunity to review and apply your Webpack knowledge.
By comparing the similarities and differences between Webpack and Vite, you can deepen your understanding of both subjects.
"Exploring" in the "darkness."
Instead of directly telling you what to do, this course takes a different approachâ€”â€œforcingâ€ you to figure things out by yourself. You will not only learn how but also know why.
Since Webpack 4, a config file is no longer needed. This, of course, is just a marketing gimmick, something Webpack does to attract more new users by appearing to be simple and convenient.
We take advantage of this feature. We will create a project and adapt it to meet the default Webpack settings. In this process, you will develop a more accurate and much deeper of how Webpack works and how to configure it.
If you prefer the old way of learning, where I give you detailed instructions on how to do everything, we have got you covered. We have prepared a traditional Webpack entry lesson, which teaches everything step by step.
Who this course is for:
JavaScript developers who want to learn Webpack 5
JavaScript developers who want to learn Vite
Webpack developers who want to learn Webpack module federation

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

OnlyKiosk Tech

Instructor's Courses

Stop hiding unwanted things in mist (Jordan Peterson, Beyond Order). Shake off the dead weight that slows you down. Your time is limited, and you have other things going on in your life. More likely than not, you will only get busier as time goes by. New technologies show up everyday. Existing ones keep upgrading, adopting new features, switching to new syntaxes. For you to stay relevant, you have to keep learning. Most importantly, you must do so quickly and easily, without spending too much time or making too much effort. Otherwise, you won't keep up with the rapid tech progress, and your life as a programmer would be too painful as you are constantly struggling with learning something new. It seems that you are caught in a dilemma where there is a lot to learn but not enough time to do it. The programming world emphasizes reusing codes. You, as a programmer, must "reuse" learning experience. The experience of learning one programming technology should enable you to pick up another one with less time and effort. In order to do so, you must disperse the mist and remove all the "unwanted things" you hide there. The "unwanted things hidden in the mist" are the insufficient understanding of a coding language or framework. You have never dug deep enough, all you have done is copying what the manual says. When things get complicated, you won't be able to come up with a solution.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.