webpack module bundler | cloudcourse.io

WEBPACKMODULE BUNDLER

CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL

ABOUT SPEAKER

Thapwaris ChinsirirathkulInfopreneur

Graphic DesignerFrontend DeveloperCEO and Founder CLOUDCOURSE.IO

[email protected]

facebook.com/xbyrztf

What’s Webpack?


Webpack น้ันเปนเคร่ืองมือที่เอาไวแปลง JavaScript Modulesใหอยูในรูปแบบที่สามารถนําไปใชบนเว็บทั่วไปได


JavaScript Modules?เชน CommonJS, AMD หรือแมแต ES6(ES2015) Module


จุดเดน


เร็ว !!Webpack ใช async I/O รวมกับการทํา cache หลายชั้น

ทําใหขั้นตอนในการ compile น้ันมีความเร็วสูงมาก


ครบถวน !!Webpack ถูกรวมไวดวยเคร่ืองมือตางๆมากมายสําหรับนักพัฒนาเว็บไซต

ทําใหประหยัดเวลาในการเตรียมเคร่ืองมือไปอยางมาก


แลวมันทาํอะไรไดบาง?


LOADERการเขียน ES6, JSX, TypeScript หรือ JavaScript Modules ตางๆ

สุดทายแลว เราก็ตองแปลงโคดเหลาน้ีใหกลับมาเปน JavaScript


LOADERซึ่งตัว Webpack เองก็ไดเตรียมเคร่ืองมือมาใหแลว

ผานสิ่งที่เรียกวา Loader


LOADERสรุป Loader ก็เหมือนกับ transform ของ Browserify น่ันเอง


LOADERซึ่งหนาที่หลักๆก็คือการแปลง Modules ตางๆใหเปนรูปแบบดั้งเดิมของมัน


DEV SERVERWebpack สามารถเปน web server สําหรับ dev ได


DEV SERVERซึ่งความสามารถของ Web Server ตัวน้ีก็ไมใชเลนๆ มันสามารถทําการ

รีเฟรชหนาจอเองไดเมื่อมีการแกไขขอมูลเหมือนกับ BrowserSync


DEV SERVERและการรีเฟรชก็ไมใชการรีเฟรชทั้งหนาเว็บเพจ แตเปนการ inject css เขาไป

เฉพาะจุดที่มีการแกไขและเรนเดอรแคจุดน้ันใหมอีกคร้ัง


DEV SERVERหรือสําหรับใครที่เขียน ReactJS ก็มีความสามารถเด็ดๆเชนมันจะเรนเดอรเฉพาะ component ที่มีการแกไขเทาน้ันและมันยังสามารถรักษา state เดิม

ที่มันเปนอยูไวไดอีกดวย


CODE SPLITTERบางคร้ังการรวม Modules หลายๆตัวเขาดวยกันมันอาจ

ทําใหไฟลที่ถูก Compile ออกมาน้ันมีขนาดใหญมากซึ่งอาจจะไมเปนผลดีตอเซิรฟเวอรของเรา


CODE SPLITTERมันจึงมีหนาที่แกปญหาตรงจุดน้ีโดยการ แบงไฟลออกเปนไฟลเล็กๆตามการใชงานได โดยที่เราสามารถสั่งใหจัดการในสวนน้ีดวยตัวเอง


CODE SPLITTERเชน ในสวนหลักเปน Core จําเปนตองใชงานทุกที่ก็สามารถแยกไวเปนไฟลหลักได และไฟลยอยอื่นๆที่อาจจะไมไดใชทุกที่ก็สามารถแยกออกมา

เปนไฟลยอยๆได ลักษณะการทํางานอาจจะคลายกับ RequireJS



WEBPACK


WEBPACK INSTALLATION


npm install webpack -g


HELLO, WEBPACK


webpack <entry> <output>


WEBPACK LOADER


ตัวอยางการติดต้ัง loader สําหรับการจัดการ css


ผลการทํางานหลังจากติดต้ังตัว loader


รันคําสั่ง webpack ./entry.js bundle.js


WEBPACK CONFIGURATION


ตอนนี้เราสามารถรันแคคําสั่ง “webpack” ไดแลว


หนาตางแสดงผลเม่ือ compile สําเร็จ


คําสั่งสําหรับเปลี่ยนรูปแบบของผลการ compile ดวย webpack –progress --colors


ผลการทํางานจะเห็นวา command window มีการแยกสีรายงานการ compile


เพ่ิม --watch หลัง webpack เพ่ือทําการตรวจจับไฟลวามีการเปลี่ยนแปลงหรือไม

ถามีการเปลี่ยนแปลงก็จะทําการ compile ใหทันที


WEBPACK DEV SERVER


รันคําสั่ง npm install webpack-dev-server –g เพ่ือทําการติดต้ังตัว Dev Server


จอแสดงผลหลังจากที่ติดต้ัง webpack dev server เสร็จ


รันคําสั่ง webpack-dev-server –progress –colors เพ่ือสั่งใหตัว server ทํางาน


WEBPACK HOT DEV SERVER


รันคําสั่ง npm init เพ่ือสรางโปรเจคไฟล package.json


กรอกรายละเอียดและตอบ yes ในขั้นตอนสุดทายและกด enter


รันคําสั่ง webpack --save-dev เพ่ือติดต้ัง webpack ใน project


รันคําสั่ง webpack-dev-server --save-dev เพ่ือติดต้ัง dev server ใน project


จอแสดงผลเม่ือติดต้ัง dev server เสร็จแลว


รันคําสั่ง webpack-dev-server –content-base --hot เพ่ือสั่งใหทํางานแบบ hot load


รันคําสั่ง npm run dev เพ่ือสั่งใหทํางานแบบ hot load


ทดสอบการทํางานโดยการเปลี่ยน value ของ css จากนั้น webpack จะทําการแสดงผลดวยการ inject css ทันที

webpack module bundler | cloudcourse.io

Software