Skip to content

youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

/

...

/

3. Webpack

Basics

Modern Bundler of Modern Application

not just bundle

convert JS to modules (ES6 syntax)

import / export variables, functions from another files

install depedencies via yarn

install babel and convert JSX for us

⁠

Screen Shot 2022-03-14 at 5.57.44 PM.png

⁠

⁠

Advoid global modules

Global modules to learn React

live-server

babel-cli

nodemon

Global modules are not listed in package.json

hard to transfer dev tools to another team, machine

Uninstall global modules

Install those global module as local module

But you can’t run command line. Instead, use ‘scripts’ within package.json to define commands.

Then use node / yarn commands to start those modules

Installing Webpack

Then you’ll need to:

create a script command "build": "webpack" in package.json

create a config file webpack.config.js at the root dir

Basic Config

2 main info:

entry point → output

Learn more about Path (core Node module)

⁠

https://nodejs.org/api/path.html⁠

⁠

Add —watch to keep compiling files when there are changes

Run live-server to see real-time compiling changes

from JSX to bundle.js

Import & Export ES6

Import Function

You can’t set entry point to all files.

you have to import all other files to entry point

you have to export necessary functions, vars to entry point

Export functions

ONE JS file can set ONE default Export

Because Default Export is only ONE, you can call it by any name when import

you should use default export if there is only ONE compoent to export

Import npm modules

install — import — use

You have to read Documenation of such modules to find out what export modules you can use.

For example, let use validator npm

⁠

https://www.npmjs.com/package/validator⁠

WEBPACK is smart enough to ONLY create bundler with necesary JS.

Webpack with Babel

Even when you use Webpack, Babel is not default available.

Webpack only bundle JS, not convert JSX to JS.

You have to install it Babel with Webpack.

Then you can use advanced Webpack Config, called LOADER

transform files before bundle

JSX to JS

SCSS to CSS

Advanced Webpack Config

Read module rules

⁠

https://webpack.js.org/configuration/module/#modulerules⁠

you can use this babel practice and apply to SCSS

Define rules:

loader (what loader to use)

test (file types to transform)

exclude (files to exclude)

Define babel preset

because you can’t run babel script anymore (you now run babel with webpack)

Organizing Components AFTER Webpack

Components

Source

Public

RULES: ONE COMPONENT PER FILE

FileName = ComponentName

Remember to import every modules required (react)

Remember to import sub-component (and export only parent component)

Source-mapping

Instead of tracking bug from bundler file, this setting will allow us to debug from JSX files.

devtool: 'cheap-module-eval-source-map'

Use webpack as web server (replace live-server)

Install webpack-dev-server (2.5.1)

Setup public folder

devServer: {

contentBase: path.join(__dirname,'public'),

disableHostCheck: true

}

Modern Bundler of Modern Application

Advoid global modules

Installing Webpack

Import & Export ES6

Import Function

Export functions

Import npm modules

Webpack with Babel

Organizing Components AFTER Webpack

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.