Webpack Module Bundler | cloudcourse.io

WEBPACK
MODULE BUNDLER
CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL

ABOUT SPEAKER
Thapwaris Chinsirirathkul
Infopreneur
Graphic Designer
Frontend Developer
CEO and Founder CLOUDCOURSE.IO
thapwaris@cloudcourse.io
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 SERVER
Webpack สามารถเปน 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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (12)

Webpack Module Bundler | cloudcourse.io