O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Webpack Module Bundler | cloudcourse.io

4.630 visualizações

Publicada em

เอกสารประกอบการสอนเรื่องการใช้งาน Webpack เพื่อจัดการ JavaScript Module สำหรับ Web Developer

Publicada em: Software
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Webpack Module Bundler | cloudcourse.io

  1. 1. WEBPACK MODULE BUNDLER CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  2. 2. ABOUT SPEAKER Thapwaris Chinsirirathkul Infopreneur Graphic Designer Frontend Developer CEO and Founder CLOUDCOURSE.IO thapwaris@cloudcourse.io facebook.com/xbyrztf
  3. 3. What’s Webpack? CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  4. 4. Webpack นั้นเปนเครื่องมือที่เอาไวแปลง JavaScript Modules ใหอยูในรูปแบบที่สามารถนําไปใชบนเว็บทั่วไปได CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  5. 5. JavaScript Modules? เชน CommonJS, AMD หรือแมแต ES6(ES2015) Module CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  6. 6. จุดเดน CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  7. 7. เร็ว !! Webpack ใช async I/O รวมกับการทํา cache หลายชั้น ทําใหขั้นตอนในการ compile นั้นมีความเร็วสูงมาก CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  8. 8. ครบถวน !! Webpack ถูกรวมไวดวยเครื่องมือตางๆมากมายสําหรับนักพัฒนาเว็บไซต ทําใหประหยัดเวลาในการเตรียมเครื่องมือไปอยางมาก CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  9. 9. แลวมันทําอะไรไดบาง? CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  10. 10. LOADER การเขียน ES6, JSX, TypeScript หรือ JavaScript Modules ตางๆ สุดทายแลว เราก็ตองแปลงโคดเหลานี้ใหกลับมาเปน JavaScript CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  11. 11. LOADER ซึ่งตัว Webpack เองก็ไดเตรียมเครื่องมือมาใหแลว ผานสิ่งที่เรียกวา Loader CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  12. 12. LOADER สรุป Loader ก็เหมือนกับ transform ของ Browserify นั่นเอง CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  13. 13. LOADER ซึ่งหนาที่หลักๆก็คือการแปลง Modules ตางๆใหเปนรูปแบบดั้งเดิมของมัน CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  14. 14. DEV SERVER Webpack สามารถเปน web server สําหรับ dev ได CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  15. 15. DEV SERVER ซึ่งความสามารถของ Web Server ตัวนี้ก็ไมใชเลนๆ มันสามารถทําการ รีเฟรชหนาจอเองไดเมื่อมีการแกไขขอมูลเหมือนกับ BrowserSync CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  16. 16. DEV SERVER และการรีเฟรชก็ไมใชการรีเฟรชทั้งหนาเว็บเพจ แตเปนการ inject css เขาไป เฉพาะจุดที่มีการแกไขและเรนเดอรแคจุดนั้นใหมอีกครั้ง CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  17. 17. DEV SERVER หรือสําหรับใครที่เขียน ReactJS ก็มีความสามารถเด็ดๆเชนมันจะเรนเดอร เฉพาะ component ที่มีการแกไขเทานั้นและมันยังสามารถรักษา state เดิม ที่มันเปนอยูไวไดอีกดวย CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  18. 18. CODE SPLITTER บางครั้งการรวม Modules หลายๆตัวเขาดวยกันมันอาจ ทําใหไฟลที่ถูก Compile ออกมานั้นมีขนาดใหญมาก ซึ่งอาจจะไมเปนผลดีตอเซิรฟเวอรของเรา CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  19. 19. CODE SPLITTER มันจึงมีหนาที่แกปญหาตรงจุดนี้โดยการ แบงไฟลออกเปนไฟลเล็กๆ ตามการใชงานได โดยที่เราสามารถสั่งใหจัดการในสวนนี้ดวยตัวเอง CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  20. 20. CODE SPLITTER เชน ในสวนหลักเปน Core จําเปนตองใชงานทุกที่ก็สามารถแยกไวเปน ไฟลหลักได และไฟลยอยอื่นๆที่อาจจะไมไดใชทุกที่ก็สามารถแยกออกมา เปนไฟลยอยๆได ลักษณะการทํางานอาจจะคลายกับ RequireJS CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  21. 21. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL WEBPACK
  22. 22. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL WEBPACK INSTALLATION
  23. 23. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL npm install webpack -g
  24. 24. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  25. 25. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  26. 26. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL HELLO, WEBPACK
  27. 27. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  28. 28. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL webpack <entry> <output>
  29. 29. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  30. 30. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  31. 31. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  32. 32. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  33. 33. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL WEBPACK LOADER
  34. 34. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL ตัวอยางการติดตั้ง loader สําหรับการจัดการ css
  35. 35. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL ผลการทํางานหลังจากติดตั้งตัว loader
  36. 36. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  37. 37. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  38. 38. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง webpack ./entry.js bundle.js
  39. 39. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  40. 40. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  41. 41. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL WEBPACK CONFIGURATION
  42. 42. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  43. 43. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL ตอนนี้เราสามารถรันแคคําสั่ง “webpack” ไดแลว
  44. 44. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL หนาตางแสดงผลเมื่อ compile สําเร็จ
  45. 45. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL คําสั่งสําหรับเปลี่ยนรูปแบบของผลการ compile ดวย webpack –progress --colors
  46. 46. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL ผลการทํางานจะเห็นวา command window มีการแยกสีรายงานการ compile
  47. 47. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL เพิ่ม --watch หลัง webpack เพื่อทําการตรวจจับไฟลวามีการเปลี่ยนแปลงหรือไม ถามีการเปลี่ยนแปลงก็จะทําการ compile ใหทันที
  48. 48. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  49. 49. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL WEBPACK DEV SERVER
  50. 50. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง npm install webpack-dev-server –g เพื่อทําการติดตั้งตัว Dev Server
  51. 51. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL จอแสดงผลหลังจากที่ติดตั้ง webpack dev server เสร็จ
  52. 52. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง webpack-dev-server –progress –colors เพื่อสั่งใหตัว server ทํางาน
  53. 53. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  54. 54. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  55. 55. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL WEBPACK HOT DEV SERVER
  56. 56. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง npm init เพื่อสรางโปรเจคไฟล package.json
  57. 57. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL กรอกรายละเอียดและตอบ yes ในขั้นตอนสุดทายและกด enter
  58. 58. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง webpack --save-dev เพื่อติดตั้ง webpack ใน project
  59. 59. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง webpack-dev-server --save-dev เพื่อติดตั้ง dev server ใน project
  60. 60. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL จอแสดงผลเมื่อติดตั้ง dev server เสร็จแลว
  61. 61. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  62. 62. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  63. 63. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  64. 64. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง webpack-dev-server –content-base --hot เพื่อสั่งใหทํางานแบบ hot load
  65. 65. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL
  66. 66. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL รันคําสั่ง npm run dev เพื่อสั่งใหทํางานแบบ hot load
  67. 67. CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL ทดสอบการทํางานโดยการเปลี่ยน value ของ css จากนั้น webpack จะทําการแสดงผลดวยการ inject css ทันที

×