웹팩 시작하기

1. ---------- 1
FRONTENDBUILD
-WEBPACK
https://fb.com/me.adunhansa
https://twitter.com/arahansa
http://adunhansa.tistory.com/
ABOUT
CONTACT
SOURCE
1

2. 1. 작성자 소개 2
-------------------------------------------------------------------
평소 정리를 즐겨합니다. 한 때
동영상강좌도
만들다보니.. 비실명과 만화캐릭터를
쓰네요
양해 부탁드립니다 ㅎㅎ

3. 시작 3
• 신림프로그래머 스터디 발표자료입니다.
• -------------------------
• 프론트엔드 빌드.. 욕심은 많았다…하지만..
• 최근 프론트엔드의 대세는 웹팩에서부터 시작을
한다고하여..
• 웹팩부터 보려고 했는데 뭐가 이리 많어@_@.. 웹팩보다가
날샌 기분이다…
• 웹팩이라도 조금씩 봐보자..

4. 4첫 시작
• 기본은 가장 먼저 여기서부터 시작을 한다.
• 여기저기서 괜히 웹팩을 기웃거리다가
여기가 정리가 가장 잘된 것을 알 수
있었다… (하지만 소스는 은근 깨지거나
빠진게 많았다 ㅠ)
https://github.com/AriaFallah/WebpackTut
orial/
• 번역하고 안되는 것들 수정해서 넣고
확인해본 리파지토리는 다음과 같다.
• https://github.com/arahansa/WebpackTut
orial/

5. 추억팔이 5
• Gulp를 정리했던…추억..
1년4개월전쯤으로 기억하는데 이미
gulp는 덜 쓰게 되는 것인가 ( 좌절 )
• http://www.slideshare.net/meadunhans
a/gulp-48608642
• https://github.com/arahansa/learn_gulp

6. 웹팩 기초에서 다룰 것들 6
• E1-가장 기본적인 webpack 번들링(기본구조, 로더)
• E2 – 설정파일 구조
• E3 – 플러그인소개
• E4- 로더와 적용 순서
• E5 – 더 많은 플러그인 ( HTML 플러그인)
• E6 – 웹팩개발서버 ( 설정파일분리, npm 스크립트 )
• E7 – 코드 작성 해본..
• Css extract
• Html reload

7. 기초2(파트2)에서 다룰 것들 7
• E1- babel을 통한 es6 다루기
• E2 – angular 연동
• E3 – React 연동
• E4 – Multiple Bundling
• E5- 웹팩개발서버 조금 더 알아보기

8. 번들링이란 무엇인가? 8
• 모듈에 대한 이야기
(https://medium.freecodecamp.com/ja
vascript-modules-a-beginner-s-
guide-783f7d7a5fcc#.hceo4glj2)
모듈을 사용하는 이유 : 유지보수, 재사용,
NameSpace
 모듈패턴
(http://www.nextree.co.kr/p4150/ )

9. 번들링이란 무엇인가? 9
• 모듈화
• http://d2.naver.com/helloworld/12864
• https://medium.freecodecamp.com/jav
ascript-modules-part-2-module-
bundling-5020383cf306#.enu302b5v

10. E1-가장 기본적인 webpack
번들링(기본구조, 로더)
10

11. E2 – 설정파일 구조 11

12. E3 – 플러그인소개 12
• UglifyjsPlugin, OccurrenceOrderPlugin
나머지 플러그인들은 하면서 종종 소개가
됨….

13. 플러그인리스트 13
• https://webpack.github.io/docs/list-of-
plugins.html
• https://github.com/webpack/docs/wiki/
list-of-plugins#defineplugin

14. E4 - 로더와 적용 순서 14

15. E5 – 더 많은 플러그인 ( HTML 플러그인) 15

16. E6 – 웹팩개발서버 ( 설정파일분리, npm
스크립트 )
16

17. 웹팩개발서버 가이드문서 17
• https://arahansa.github.io/learnwebpac
k/webpack-dev-server.html
• 기억해볼만한 것 : 프록시, 세이프write

18. Css Extract 18
• Extract설정

19. HTML Reload 19

20. ES lint 20
• https://medium.com/@tkssharma/eslint
-in-react-babel-webpack-
9cb1c4e86f4e#.6mpsicf8j

21. 참조할 Multiple bundle 21
• 추가중..
https://github.com/jcreamer898/webpa
ck-express-
starter/blob/master/webpack.config.js

22. 추가로 얘기했던 웹팩 개발서버 22
• 웹팩 개발 서버 번역
https://arahansa.github.io/learnwebpac
k/webpack-dev-server.html
• 웹팩개발 서버 프론트엔드
• https://github.com/arahansa/learnwebp
ack
• 잠깐 만든 웹팩 개발서버 백엔드 서버
• https://github.com/arahansa/learn_web
pack_backend

23. 23
THANK YOU !
즐거운 개발됩시다.
아라한사 올림
arahansa
------
------
페북 : https://fb.com/me.adunhansa
트위터 : https://twitter.com/arahansa
블로그: http://adunhansa.tistory.com/
사이트 : http://arahansa.com