# REACT WEBPACK:

# 1. Webpack overview:

## 1.1. Problems:

Back in the days, we used to import all the javascript files (and other assets file like css, images, fonts, etc.) at a global scope like this:


This lead to 2 major problems:
- Variables from different javascript files can be conflicted because they have the same name and the same global scope
- The list of files are long and it take a lot of work to manually import the files to the global scope.

## 1.2. Solutions:

- With the problem of conflicting variables:

+, It was solved by using IIFE (Immediately invoked function expression)

+, Basically, the way IIFE works is automatically wrap the code of a javascript file into a function and assign it to a variable

+, That way, all the variables are in the scope of the function, not in global scope and avoid variables conflicts

- We will still need a tool to:

+, Automatically bundle all javascript css files into a single static js or css file.

+, It would be nice to bundle all the code into 1 minified line of javascript or css :)

+, Automatically import other asset files (such as images, fonts, html) to the global scope

=> Webpack is the tool that handle all of these needs


## 1.3. Overview of how does webpack works:

- Webpack does it job based on some configurations that describes the process of transformation.

For example:

+, what need to be transformed
+, where to start
+, where to end
+, where to put all the static files
+, how the transformation should be applied
+, in what order should the transformation be applied


=> In general, webpack helps bundle and minify development code, build and transpile code to produce an optimized production code

## 1.4. Other knowledge and details about webpack:

### a. What is the differences between webpack and babel ?

babel helps us to transpile modern code such as features in ES6 and above into normal JS code

this is because some browser doesn't support new features of JS ES6 or more mordern features of JS
(nowadays we have ES10)
This problem is called backward compability

webpack is the bundling tool

# 2. Webpack File Details:

## 2.1. Config File:

## 2.2. Plugins:

- Plugins are used to customize webpack build process.

- Plugins aim to:
+, Automatically pull out common code to one or more separate files (code splitting)
+, Code minification
+, Hot module replacement (live reload)
+, etc.

- Example of setting up plugin in webpack config file:


## 2.3. Source map:

- The production code or the built code on the development environment is minified and hard to debug on browser

- Source map helps developer to see the code in a more structured way so that it helps the process of debugging

- Source map should only be generated in development environment, not in production to hide the development code from the public audiences

- You can enable source mapping in webpack configuration file. Search for how to do it if you need to

Example of source map in browser:


## 2.4. Loader:

- Loader specify the package that can be applied for a certain file type in the whole code base

- The package that are applied will be automatically processed to load different files in build time.

**For example:** the loader down below specify packages that needed to be load for .scss files. These are to be used to compile scss to css because the browser doesn't support .scss file nor compile them to css


## 2.5. Dev Server:

- The package webpack-dev-server helps us to configure development server

- This package helps keep the process alive, whenever you changed something, the new build code is automatically reloaded in the dev server

Video Resources:

- Setting eslint and prettier
https://www.youtube.com/watch?v=ODCNj24lLUk&ab_channel=D%C6%B0Thanh%C4%90%C6%B0%E1%BB%A3c