2019. 9. 27. 11:20ㆍWebpack/WORK
개요 :
Webpack의 개념과 사용법을 이해하고, ES6의 기초개념을 살펴봅니다. css, js 파일을 Webpack을 이용하여 하나의 파일로 압축하고 필요한 것만 로드하여 사이트의 렌더링을 빠르게 합니다. 또한, ES6를 사용하여 js모듈관리를 함으로써 프론트엔드의 소스를 관리합니다.
목표 :
프론트엔드의 중요성이 점점 높아짐에 따라 프론트엔드 개발의 이해와 고급 자바스크립트 기술을 교육함으로써 웹 개발자의 능력을 향상시키기 위한 과정입니다.
정의 :
웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러입니다. 모듈 번들러란 웹 어플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images, Font 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.
장점 :
1. css/js 오류자동확인
2. 코드압축/최적화(난독화,주석삭제,최소화)
3. 기존 파일단위의 js 관리 -> 모듈단위의 js 관리 (main.js, sub.js -> swiper.js, lazyload.js ...)
- 가독성과 유지보수 효율을 높입니다.
- 스코프에 신경 쓰지 않고 개발이 가능합니다.
- 라이브러리 종속 순서를 신경쓰지 않아도 됩니다.
4. 웹 어플리케이션의 빠른 로딩 속도와 높은 성능
5. dev-server 사용, 원활한 개발가능(LESS,SASS,ES6)
6. 네트워크 병목현상을 해결
HTML에서 <script />로 자바스크립트 파일을 실행 할 수 있습니다. 너무 많은 자바스크립트 파일을 로드할 경우, 네트워크의 병목현상이 발생하게 됩니다. 이러한 문제를 하결하기 위해 하나의 큰 자바스크립트 파일을 로드하면 되지만, 하나의 자바스크립트 파일로 개발할 경우, 가독성과 유지보수 효율이 떨어지게 됩니다. webpack과 같은 모듈 번들러는 여러 파일을 하나의 파일로 묶어주기 때문에, 네트워크 병목현상을 최소화 할 수 있습니다.
7. 브라우저별 HTTP 요청 숫자의 제약 해결
(브라우저최대 연결 횟수)
| 익스플로러 7 | 2 |
| 익스플로러 8 ~ 9 | 6 |
| 익스플로러 10, 11 | 8, 13 |
| 크롬 | 6 |
| 사파리 | 6 |
| 파이어폭스 | 6 |
| 오페라 | 6 |
| 안드로이드, iOS | 6 |
구조 :
dist (dev, dev-server)
: mode - development
: 압축 X, 난독화 X, src 폴더 추적가능(source - webpack)
: 개발용 소스 관리
: dev-server 기능 - 페이지 AutoReload
release
: mode - production
: 압축 O, 난독화 O,
: 배포용 소스 관리
커리큘럼 :
1교시 -
1. Tool 설치 및 node 설치
2. git 배포 및 소스관리
2교시 -
3. webpack 기본설정
- package.json (webpack)
- webpack.config.js
-> dist
3교시 -
3. webpack (css, 압축, 암호화, dev/real 버전관리)
- package.json (css-loader, extract-text-webpack-plugin, optimize-css-assets-webpack-plugin, uglifyjs-webpack-plugin, webpack-merge)
- webpack.dev.config.js
-> dist
- webpack.prod.conf.js
-> release
4교시 -
3. webpack (ES6 -> ES5)
- package.json (babel)
5교시 -
3. webpack (dev-server)
- package.json (webpack-dev-server, html-webpack-plugin)
6교시 -
3. webpack 모듈화
- webpack.config.js
-> entry, plugins 모듈화
7교시 -
3. ES6
- 전역변수 사용 X
8교시 -
3. webpack (handlebars)
- html component
??? css 압축 OK
??? html OK
??? dev 버전과 release 버전을 따로 관리 OK
??? webpack-dev-server OK
??? webpack entry 설정 - entry 구문은 계속 추가해야 하는가?
??? css/js 파일이 utf-8 일 경우 webpack 빌드시 한글 encoding 이 잘됩니다. 하지만,, euc-kr 파일의 encoding은 깨지네요..
??? image 경량화
??? 각각의 파일을 개별적으로 import 해야하는가?
??? 플러그인 css,js 파일 관리는 어떻게 해야 하는가? - vendor.js 파일?
??? ES6 관련 필요한 것만 로드할 수 있는가?
??? 파일단위 scope 가능한가? (css/js 파일별 독립적인 관리)
??? IE8 지원설정?