Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

신림프로그래머 스터디 웹팩 발표자료

1,627 views

Published on

웹팩 시작하기

Published in: Technology
  • Be the first to comment

신림프로그래머 스터디 웹팩 발표자료

  1. 1. ---------- 1 FRONTENDBUILD -WEBPACK https://fb.com/me.adunhansa https://twitter.com/arahansa http://adunhansa.tistory.com/ ABOUT CONTACT SOURCE 1
  2. 2. 1. 작성자 소개 2 ------------------------------------------------------------------- 평소 정리를 즐겨합니다. 한 때 동영상강좌도 만들다보니.. 비실명과 만화캐릭터를 쓰네요 양해 부탁드립니다 ㅎㅎ
  3. 3. 시작 3 • 신림프로그래머 스터디 발표자료입니다. • ------------------------- • 프론트엔드 빌드.. 욕심은 많았다…하지만.. • 최근 프론트엔드의 대세는 웹팩에서부터 시작을 한다고하여.. • 웹팩부터 보려고 했는데 뭐가 이리 많어@_@.. 웹팩보다가 날샌 기분이다… • 웹팩이라도 조금씩 봐보자..
  4. 4. 4첫 시작 • 기본은 가장 먼저 여기서부터 시작을 한다. • 여기저기서 괜히 웹팩을 기웃거리다가 여기가 정리가 가장 잘된 것을 알 수 있었다… (하지만 소스는 은근 깨지거나 빠진게 많았다 ㅠ) https://github.com/AriaFallah/WebpackTut orial/ • 번역하고 안되는 것들 수정해서 넣고 확인해본 리파지토리는 다음과 같다. • https://github.com/arahansa/WebpackTut orial/
  5. 5. 추억팔이 5 • Gulp를 정리했던…추억.. 1년4개월전쯤으로 기억하는데 이미 gulp는 덜 쓰게 되는 것인가 ( 좌절 ) • http://www.slideshare.net/meadunhans a/gulp-48608642 • https://github.com/arahansa/learn_gulp
  6. 6. 웹팩 기초에서 다룰 것들 6 • E1-가장 기본적인 webpack 번들링(기본구조, 로더) • E2 – 설정파일 구조 • E3 – 플러그인소개 • E4- 로더와 적용 순서 • E5 – 더 많은 플러그인 ( HTML 플러그인) • E6 – 웹팩개발서버 ( 설정파일분리, npm 스크립트 ) • E7 – 코드 작성 해본.. • Css extract • Html reload
  7. 7. 기초2(파트2)에서 다룰 것들 7 • E1- babel을 통한 es6 다루기 • E2 – angular 연동 • E3 – React 연동 • E4 – Multiple Bundling • E5- 웹팩개발서버 조금 더 알아보기
  8. 8. 번들링이란 무엇인가? 8 • 모듈에 대한 이야기 (https://medium.freecodecamp.com/ja vascript-modules-a-beginner-s- guide-783f7d7a5fcc#.hceo4glj2) 모듈을 사용하는 이유 : 유지보수, 재사용, NameSpace  모듈패턴 (http://www.nextree.co.kr/p4150/ )
  9. 9. 번들링이란 무엇인가? 9 • 모듈화 • http://d2.naver.com/helloworld/12864 • https://medium.freecodecamp.com/jav ascript-modules-part-2-module- bundling-5020383cf306#.enu302b5v
  10. 10. E1-가장 기본적인 webpack 번들링(기본구조, 로더) 10
  11. 11. E2 – 설정파일 구조 11
  12. 12. E3 – 플러그인소개 12 • UglifyjsPlugin, OccurrenceOrderPlugin 나머지 플러그인들은 하면서 종종 소개가 됨….
  13. 13. 플러그인리스트 13 • https://webpack.github.io/docs/list-of- plugins.html • https://github.com/webpack/docs/wiki/ list-of-plugins#defineplugin
  14. 14. E4 - 로더와 적용 순서 14
  15. 15. E5 – 더 많은 플러그인 ( HTML 플러그인) 15
  16. 16. E6 – 웹팩개발서버 ( 설정파일분리, npm 스크립트 ) 16
  17. 17. 웹팩개발서버 가이드문서 17 • https://arahansa.github.io/learnwebpac k/webpack-dev-server.html • 기억해볼만한 것 : 프록시, 세이프write
  18. 18. Css Extract 18 • Extract설정
  19. 19. HTML Reload 19
  20. 20. ES lint 20 • https://medium.com/@tkssharma/eslint -in-react-babel-webpack- 9cb1c4e86f4e#.6mpsicf8j
  21. 21. 참조할 Multiple bundle 21 • 추가중.. https://github.com/jcreamer898/webpa ck-express- starter/blob/master/webpack.config.js
  22. 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. 23 THANK YOU ! 즐거운 개발됩시다. 아라한사 올림 arahansa ------ ------ 페북 : https://fb.com/me.adunhansa 트위터 : https://twitter.com/arahansa 블로그: http://adunhansa.tistory.com/ 사이트 : http://arahansa.com

×