쉽게 배우는 Webpack

쉽게 배우는 Webpack

(36개의 수강평)

986명의 수강생
WebpackBundling
공개되지 않은 강의입니다.
지식공유자 · 장기효(캡틴판교)
51회 수업· 총 3시간 26분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 초급

이 강의는

최신 프론트엔드 프레임워크(React, Angular, Vue)에서 필수로 사용되는 도구인 Webpack의 기본 개념을 학습하는 강좌입니다. 본 수업을 통해 Webpack의 배경과 사상에 대해 이해하고, Webpack 설정 파일을 쉽게 분석 및 커스터마이징이 가능하도록 수강생의 역량을 향상시키는데 목적을 두고 있습니다.

"웹팩 리뉴얼 강좌가 3월 18일(수)에 개시되었습니다."

"리뉴얼 강의 무료 쿠폰은 새소식의 공지 사항을 참고하세요 😄"

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

공개 일자

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

수강 후기

4.1
36개의 수강평
default_profile.png
OCK Sam 11달 전
버전이 달라지긴 했지만, 이또한 공부라 생각하고 달라진 부분을 직접 찾아서 구현함으로써 공부하는데 도움이 많이 되었습니다! 갓틴갓교 감사합니당
59df3fa18d647-bpfull.jpg
최재현 2017.10.12
좋네용 대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.
default_profile.png
jude 4달 전
웹팩에 대해 기본적인 지식을 알 수 있었던 강의였던거 같아요, 알아두면 좋은 문서들 추천이 많아서 좋았습니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스