쉽게 배우는 Webpack

쉽게 배우는 Webpack

(25개의 수강평)

804명의 수강생
38,500원
지식공유자 · 장기효(캡틴판교)
51회 수업 · 총 3시간 31분 수업
평생 무제한 시청
수료증 발급 강좌
수강 난이도 '초급'

1. 강좌 소개

최신 프론트엔드 프레임워크(React, Angular, Vue)에서 필수로 사용되는 도구인 Webpack의 기본 개념을 학습하는 강좌입니다. Webpack에 막연한 두려움을 가지고 계신 프론트엔드 입문 개발자, 웹 개발자를 대상으로 합니다. 본 수업을 통해 Webpack의 배경과 사상에 대해 이해하고, Webpack 설정 파일을 쉽게 분석하고 커스터마이징이 가능하도록 수강생의 역량을 향상시키는 수업을 목표 로합니다. 복잡하기로 악명 높은 Webpack의 설정을 쉽게 이해하기 위해, 각 속성들의 역할 간단히 설명 -> 강사가 라이브 코딩 -> 준비된 예제로 수강생이 실습형태로 수업을 진행합니다. Webpack의 주요 속성인 Entry, Output, Loader, Plugin, Resolve 등을 다루고, 웹팩을 이용한 개발환경 구성 방법과 기타 웹 자동화 도구와의 연동 방법 등을 학습하여 기본 개념뿐만 아니라 실제로 서비스와 실무에 적용할 수 있게끔 교과과정을 구성하였습니다.

웹팩 핸드북 사이트 소개

위 사이트는 강의와 함께 보세요 😄

2. 누구에게 도움이 되나요?

  • Webpack이 뭔지 모르시는 분
  • Webpack은 들어봤으나 설정 파일을 열면 겁을 먹는 분
  • Webpack 공식 문서를 보다가 마우스 던지신 분
  • Webpack을 배우고 싶은데 마땅한 참고 자료가 없으신 분
  • 이 이미지를 보고 뭔 소리인지 모르시겠다는 분들은 다 들으시면 됩니다.

 

3. 어떤 걸 배우나요?

Webpack 주요 속성 Webpack 개발환경 구성 부록
  • Entry
  • Output
  • Loader
  • Plugin
  • Resolve
  • Webpack Dev Server
  • Webpack Dev Middleware
  • 개발자 도구 연동
  • Gulp와 연동
  • NPM(Node Package Manager) 소개 및 사용법
  • 자바스크립트 모듈화
  • Node Path API

4. 강좌 특징

설정이 복잡할수록 작은 단위부터 차례차례 학습을 하셔야 큰 그림을 그릴 수 있습니다. 각 주요 속성들에 대해서 간단히 설명 후 강사의 라이브 코딩 -> 준비된 예제에 따라 수강생이 실습하도록 교과과정을 구성하였습니다. 이 방식으로 수강생분들이 쉽고 빠르게 Webpack을 따라 할 수 있도록 구성하였습니다. 또한, 많이들 궁금해하는 웹팩을 왜 사용해야 하는가? 웹팩의 배경, 웹팩 사용에 필요한 선수지식(NPM, 자바스크립트 모듈화)과 기타 기술들(Node.js, Gulp)을 미리 다 설명드리고, 자세한 설정을 살펴보기 때문에 한 편의 이야기와 같은 수업입니다.

5. 강사 소개

장기효 (캡틴판교)

웹으로 세상을 더 편하게 만들 수 있다고 믿는 웹 개발자 입니다. 웹 성능 최적화에 관심이 많고, 취미로 기술 블로그를 운영하며 노래 부르는 것을 좋아해 홈 레코딩을 합니다.

[프로필]   인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

지식공유자 소개

장기효(캡틴판교)

교육과정

모두 펼치기 51 강의 3시간 31분
섹션 2. Webpack Entry
1 강의 04 : 00
Entry 소개 및 유형
04 : 00
섹션 3. Webpack Output
3 강의 07 : 00
Output 소개
02 : 00
Output Name 옵션
02 : 00
[부록] path.join() & path.resolve() 소개
03 : 00
섹션 4. Webpack Loader
4 강의 27 : 00
Loader 소개
03 : 00
Babel Loader
03 : 00
[실습] CSS Code Splitting 1 - Bundling libraries
13 : 00
[실습] CSS Code Splitting 2 - Extract Text Plugin
08 : 00
섹션 5. Webpack Plugins
5 강의 22 : 00
Plugin 소개
03 : 00
Plugin 종류
03 : 00
[실습] Libraries Codes Splitting 1 - Bundling libraries
09 : 00
[실습] Libraries Codes Splitting 2 - Common Chunks Plugin
05 : 00
[실습] Libraries Codes Splitting 3 - Manifest Plugin
02 : 00
섹션 6. Webpack Resolve
5 강의 21 : 00
Resolve 소개
02 : 00
Resolve Option
04 : 00
[실습] Resolve Modules 1 - Bundling libraries
04 : 00
[실습] Resolve Modules 2 - Resolve Alias
08 : 00
[실습] Resolve Modules 3 - Provide Plugins
03 : 00
섹션 8. Webpack Dev Server
7 강의 23 : 00
Webpack 빌드를 위한 서버 구성
02 : 00
Webpack Dev Server 소개
02 : 00
Webpack Dev Server Option
03 : 00
[실습] Webpack Dev Server 1 - Server 구성 및 실행
08 : 00
[실습] Webpack Dev Server 2 - Dev Server 인메모리 컴파일의 특징
03 : 00
[부록] Path vs Public Path 소개
03 : 00
[부록] Path vs Public Path 사례
02 : 00
섹션 9. Webpack Dev Middleware
4 강의 25 : 00
Webpack Dev Middleware 소개
03 : 00
[실습] Webpack Dev Middleware - Node.js로 로컬 서버 구성
09 : 00
[실습] Webpack Dev Middleware
12 : 00
[부록] Webpack 1.x 공식 문서와 3.x 공식 문서의 차이점
01 : 00
섹션 10. Webpack 기타 및 외부 도구 연동
5 강의 13 : 00
Webpack 주 사용 명령어
02 : 00
[실습] Watch 옵션
03 : 00
Sourcemap 활용
04 : 00
Gulp 연동
02 : 00
Hot Module Replacement
02 : 00
섹션 11. [최종 프로젝트] Vue Loader 해석
1 강의 10 : 00
Vue.js CLI로 생성한 Webpack 설정파일 분석
10 : 00

공개 일자

2017년 10월 9일 (마지막 업데이트 일자 : 2018년 12월 5일)

수강 후기

4.0
25개의 수강평
OCK Sam 2달 전
버전이 달라지긴 했지만, 이또한 공부라 생각하고 달라진 부분을 직접 찾아서 구현함으로써 공부하는데 도움이 많이 되었습니다! 갓틴갓교 감사합니당
최재현 2017.10.12
좋네용 대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.