Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Webpack Module Bundler | cloudcourse.io

4.645 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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 ทันที

×