webpack 5

webpack 5

hola

Why Webpack

Basics

Adding Config

---

If no mode is defined then by default it is production mode

Fixing button click

IIFE is has a separate scope in the browser, and this is done so that it does not pollute the entire namespace or the entire global space in the browser

this is good approch as it does not create any conflict between any other file loader in the browser as it will have its own scope (execution context)

---

CommonJS module

Nodejs natively only understand commonJS , to use ES6 in node, we kind of need to teach nodejs to handle commonJS imports

Loader Section

Webpack by default doesnot know how to bbe dealing with file other than JavaScript (JS, JSON), we need to be teaching webpack exactly how to be loading other file type, that is where loader coming to help
We need to be defining different loader for different file types

CSS Loaders

when you index.js file is hit it sees an import of index.css , and css-loader now know how to be resolve this dependency, but it doesnot know what to be doing with it, so that data besically passes to the style loader, so it's kind of creating a style tag in html doc and putting css there
loader executes from right to left in order

---

CSS Loader Part 2 (CSS modules)

All class and id get exported in an object format

---

---

Adding global style

SCSS Loader

Loading Images In JS

---

to make sure all assets goes inside images folder with hashed filename and proper extension

Fonts Loader

this 2 are inbuild modules in webpack so it does not required to be installed as a dependecny

Plugins Introductions

Multiple Entry bundle

---

Plugins

wht exactly HTML Webpack pluging doing?
it will going to injecting all the dependecny directly into the html file. (automatically injecting)

Env plugin?
to setup some env variable

html minimizer plugins?
minify bundle size

HTML Webpack plugins

It created its own index.html file and injected dependency there

---

but we want dependency to be injecting in our own index.html file which we created

But now our html seems to be working but we lost all our css and images?
lets fix it next

Webpack dev server

importing

importing other css in css

importing vendor module css in scss

---

npm run dev -> webpack serve ,, its going to be just outputting it directly in browser and it sort of maintaining the dist folder in memory, thats why we do not see the dist folder here

Copy assets to dist folder

Optimization Section

Code Splitting

Code splitting means bringing out some common dependency into seperate bundle for eg: here some common dependeny are: bootstrap, lodash
this prevents duplications

webpack-bundle-analyzer

---

---

webpack split chunks

this is generate sepeate chunk for css file in js format (css in js)

Lady Loading | Dynamic imports

Adding hash to the output bundle file

this hash version is only going to be changing only when any dependecny inside that bundle changes

Producation Optimization

---

---

we split html and css so that each can be cache seperatly in browser so that change made in html does not require to pull css again from server and vice versa

---

Now we do not want to inject style directly in html (style-loader does this, ) instead we want a sepeate css file

Shimming

---

---

---

It is now going to resolve mnt which was not found earlier, and that is how you be resolvng and modifiing the global level exports that are required by some of those legacy libraries

Remove dead CSS

glob is a helper lib for scanner the folder

---

---

---

what if some of your css classess are getting added dynamically, then we can use safeList and pass class in an array format so that it is always included and never purged

Tree Shaking (Removing dead JS)

Mode Difference

---

---

https://github.com/gauravsoni1/webpack-udemy/tree/master/9.4%20ProductionBuild_MultipleWebpackConfig

Merging webpack configs

React App using Webpack

---

---

---

You will see an error, as jsx is not understood by default, we teach webpack to handle jsx files

Adding Babel loader

---

Corrected dev server config

---

Telling webpack not to mess with the route as it is handled by browserRoute (Client side)

Post CSS Loader Configurations

it is like adding polyfills for css to support in all browsers

---

---

now polyfills are auto added by plugins to support diff browser