Thumbnail

쉽게 배우는 Webpack 대시보드

(4.2)
41개의 수강평 ∙  987명의 수강생
공개되지 않은 강의로
수강이 제한됩니다.
지식공유자: 장기효(캡틴판교)
총 51개 수업 (3시간 26분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공

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

 

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 | 장기효님 인터뷰 보러가기


안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교)의 썸네일

인프런에서 8년째 지식을 공유하고 있습니다.

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각을 들을 수 있는 곳

커리큘럼 총 51 개 ˙ 3시간 26분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. Webpack Entry
Entry 소개 및 유형 03:36
섹션 3. Webpack Output
Output 소개 미리보기 01:36
Output Name 옵션 01:47
[부록] path.join() & path.resolve() 소개 02:40
섹션 4. Webpack Loader
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
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
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
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
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 기타 및 외부 도구 연동
Webpack 주 사용 명령어 02:17
[실습] Watch 옵션 02:53
Sourcemap 활용 03:52
Gulp 연동 01:35
Hot Module Replacement 01:34
섹션 11. [최종 프로젝트] Vue Loader 해석
Vue.js CLI로 생성한 Webpack 설정파일 분석 10:34
강의 게시일 : 2017년 10월 10일 (마지막 업데이트일 : 2018년 12월 05일)
수강평 총 41개
수강생분들이 직접 작성하신 수강평입니다.
4.2
41개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Leo thumbnail
5
Webpack을 이해하는데 많은 도움이 되었습니다.
2021-07-30
graycat thumbnail
5
좋네용 대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.
2017-10-12
jude thumbnail
5
웹팩에 대해 기본적인 지식을 알 수 있었던 강의였던거 같아요, 알아두면 좋은 문서들 추천이 많아서 좋았습니다.
2020-02-17
meon take thumbnail
4
감사합니다. 수고하세요
2021-04-04
OCK Sam thumbnail
4
버전이 달라지긴 했지만, 이또한 공부라 생각하고 달라진 부분을 직접 찾아서 구현함으로써 공부하는데 도움이 많이 되었습니다! 갓틴갓교 감사합니당
2019-07-27