🌐 react_webpack_template

📝 Intro

Wepack 으로 React.js 개발환경 build하기

기능 별 자세한 설명 및 프로그래밍 과정은 https://velog.io/@gparkkii/reactwebpack1 에서 확인 가능합니다.

---

🚀 Quick Start

• 애플리케이션 설치

$> git clone https://github.com/gparkkii/react_webpack_template.git
$> npm i

• 애플리케이션 실행

$> npm start

---

📍 Need To Develop

• Production mode config
• add chunk config
• storybook
• workbook.md

---

🛠 Project Structure

주요 라이브러리 (package)

package.json
├── react : 리액트 라이브러리
├── react-dom : 브라우저 DOM 제어 및 UI 렌더링
├── @babel/core : Babel 핵심 의존성 라이브러리
├── @babel/preset-env : ES 버전 자동 컴파일
├── @babel/preset-react : jsx 코드 자동 변환
├── babel-loader : 자바스크립트 컴파일러
├── webpack : 웹팩 모듈 번들러
├── webpack-cli : 커맨드라인 인터페이스
├── webpack-dev-server : 애플리케이션 개발 서버 제공
├── webpack-bundle-analyzer : 번들 analyzer
├── html-webpack-plugin : 빌드 시 html 파일 자동 생성
├── clean-webpack-plugin : 번들링 할 때마다 이전 결과물 제거
└── @pmmmwh/react-refresh-webpack-plugin : 코드를 수정 시 자동으로 렌더링 해주는 라이브러리

템플릿 구조 (/src)

📦 react_webpack_template
├── 🗂 public
│   ├── 📄 favicon.png
│   ├── 📄 index.html
├── 🗂 src
│   ├── 📂 assets ───────────────  이미지 파일
│   │   ├── 📄 react.png
│   │   └── 📄 webpack.png
│   │
│   ├── 📂 components ───────────  view 컴포넌트
│   │   └── 📂 Common ───────────  공통으로 사용되는 컴포넌트
│   │       ├── 📄 AppLayout.js
│   │       ├── 📄 Header.js
│   │       └── 📄 Footer.js
│   │
│   ├── 📂 pages ────────────────  라우팅에 쓰일 pages
│   │   └── 📄 Main.js
│   │
│   ├── 📂 style ────────────────  css & emotion styles
│   │   ├── 📂 container
│   │   │   └──styles.js
│   │   ├── 📄 media_query
│   │   └── 📄 index.css
│   │
│   ├── 📄 App.js ───────────────  pages route 처리
└── └── 📄 index.js ─────────────  애플리케이션 엔트리 포인트

---