filmov
tv
Webpack in 100 Seconds
Показать описание
Webpack in 100 Seconds, by QuickDev.
Topics Covered:
What is webpack?
Is webpack worth learning?
What does webpack do?
Getting started with webpack
Module builders explained.
Webpack Config Explained
Webpack Demo.
Javascript Module Builders
In the old days, all you needed for a website was a HTML file. You add some CSS for styling and Javascript for interaction. And that’s it.
But things have changed. Nowadays, you probably want a UI library like react. Maybe Firebase for storing data. Auth0 for login. Stripe for payments. The list goes on and on.
Some of those modules use commonjs, and some are ES modules. You need to minify your code so that load times are actually decent. And, you need to make sure all your code is included in the right order. It’s a developer’s nightmare.
The solution? Webpack. Webpack is a module builder. It’s main purpose is to bundle many javascript files into a single file. It automatically handles dependencies, transpiling ES and Commonjs modules, and improves load times by minifying your code. You can also use webpack plugins to do a variety of other things, like converting HTML code into Javascript that’s injected on runtime, obfuscating code, and even storing assets in base64 format.
Here I've created a simple to-do list. Let’s see how we can use webpack to convert all my javascript files into one single bundle. First, install webpack from npm. Then, we can create a config file that specifies options to webpack. Now, to actually bundle the code, we can run webpack with a specified config file. There we go, we have the bundle. Now we can import this bundle on our html, and it works!
Subscribe for more content like this (IT'S FREE)
#webpack #javascript #coding
Topics Covered:
What is webpack?
Is webpack worth learning?
What does webpack do?
Getting started with webpack
Module builders explained.
Webpack Config Explained
Webpack Demo.
Javascript Module Builders
In the old days, all you needed for a website was a HTML file. You add some CSS for styling and Javascript for interaction. And that’s it.
But things have changed. Nowadays, you probably want a UI library like react. Maybe Firebase for storing data. Auth0 for login. Stripe for payments. The list goes on and on.
Some of those modules use commonjs, and some are ES modules. You need to minify your code so that load times are actually decent. And, you need to make sure all your code is included in the right order. It’s a developer’s nightmare.
The solution? Webpack. Webpack is a module builder. It’s main purpose is to bundle many javascript files into a single file. It automatically handles dependencies, transpiling ES and Commonjs modules, and improves load times by minifying your code. You can also use webpack plugins to do a variety of other things, like converting HTML code into Javascript that’s injected on runtime, obfuscating code, and even storing assets in base64 format.
Here I've created a simple to-do list. Let’s see how we can use webpack to convert all my javascript files into one single bundle. First, install webpack from npm. Then, we can create a config file that specifies options to webpack. Now, to actually bundle the code, we can run webpack with a specified config file. There we go, we have the bundle. Now we can import this bundle on our html, and it works!
Subscribe for more content like this (IT'S FREE)
#webpack #javascript #coding
0:01:39
Webpack in 100 Seconds
0:09:56
Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack
0:02:29
Vite in 100 Seconds
0:02:49
How to make your JavaScript Bundle Smaller
0:02:07
🌐 what is webpack
0:02:18
Session vs Token Authentication in 100 Seconds
0:01:44
JavaScript Modules in 100 Seconds
0:02:13
PostCSS in 100 Seconds
0:01:49
Electron JS in 100 Seconds
0:16:00
Don't learn Webpack in 2023: A dive into 3 alternatives
0:01:34
Webpack Tree Shaking in 100 Seconds
0:02:39
Expo in 100 Seconds
0:02:16
Web Assembly (WASM) in 100 Seconds
0:02:47
High-school student makes React a million times faster
0:03:15
JavaScript just got way faster
0:09:07
Monorepos - How the Pros Scale Huge Software Projects // Turborepo vs Nx
0:18:35
Explains Module Bundlers in 3 Levels of Difficulty
0:00:38
Webpack
0:06:49
Webpack in 6 minutes | main reasons why we use module bundlers like webpack
0:04:11
Webpack résumé en 4 minutes ( La logique, les Loaders et les plugins )
0:02:31
CORS in 100 Seconds
0:00:23
Glimpse of a webpack. #shorts #javascript #react
0:06:16
Next.js 13… this changes everything
0:02:33
Redux in 100 Seconds
Комментарии