Webpack Module Bundler | cloudcourse.io

WEBPACKMODULE BUNDLER

CLOUDCOURSE.IO | THAPWARIS CHINSIRIRATHKUL

ABOUT SPEAKER

Thapwaris ChinsirirathkulInfopreneur

Graphic DesignerFrontend DeveloperCEO 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 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

Xilinx ISE Webpack 14.7 Kurulum Tutorial - kasirgalabs.com · Xilinx sitesine giriş yaptıktan sonra Xilinx ISE Webpack 14.7’yi bilgisayarınıza indirmeniz için yukarıda anlatılan

Menggunakan ise webpack 1

Webpack - просто о сложном

RubyGems, Rails, Bundler

大規模プロダクト Webpack やっていく気持ち

Management of Gems using Bundler

Webpack dist

M H M Séances CE2, 2...Module 1 6 0 Module 2 6 1 Module 3 8 1 Module 4 8 1 Module 5 7 1 Module 6 6 1 Module 7 7 1 Module 8 7 1 Module 9 6 1 Module 10 7 1 Module 11 6 1 Module 12 7

第 3 章 Webpack+Vue.js开发准备 - Tsinghua第 3 章 Webpack+Vue.js开发准备所有的Vue.js 项目都是在Webpack 的框架下进行开发的。可以说vue-cli 直接把

Czym jest webpack i dlaczego chcesz go używać?

Honey's Data Dinner#7 webpack 包達人(入門)

Как Webpack сделал меня счастливее

Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka

Einführung in Xilinx Webpack ISE 10 - NTB Buchs · 2011-05-19 · INTERSTAATLICHE HOCHSCHULE Webpack ISE Tutorial FÜR TECHNIK BUCHS NTB Einführung in Xilinx Webpack ISE 10.1 Diese

JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, лома и какой-то матери"

Resolvendo problemas de dependências com o Bundler

Warsaw Frontend Meetup #1 - Webpack

[XECon2016] A-2 임형주 Webpack 실무 적용전략

HOOGSLAPER-MODULE · gangkast-module. zitkussen-module. infobalie-module 1 2. 1 2 wasserette-module. kruidenrek-module. rainchain-module. co-working-module. wastafel-module. moeten

탐색적분석기반동적차트및맵솔루션 Chart Intelligence & Insight 소개b2i-lab.com/assets/doc/C2I_Intro_20_H2.pdf · 2020. 7. 6. · Grunt/Gulp/Webpack/Babel, Jasmin,