ในโลกปัจจุบันมีการพัฒนาเว็ปไซต์ด้วยเครื่องมือและแพ็คเกตสุดเจ๋งมากมายให้พวกเราสามารถนำไปต่อยอดได้กัน อดีตที่ผ่านมามีเครื่องมือมากมายเหมือนกัน แต่ตัวที่นิยมมากจะเป็น Gulp และ Grunt สำหรับผู้พัฒนาเว็ปไซต์รวมทั้งผมด้วย
ล่าสุดนี้ผมเป็นแฟนของ Webpack เพราะ เมื่อทำงานได้ราบรื่นเนื่องจาก มันไม่ต้องทำงานแบบเป็นสเต็ป 1 2 3 ซึ่งอันนี้คือเป็นส่วนที่ดีกว่าเครื่องมือส่วนมากสมัยก่อน อีกหนึงเหตุผลที่เราจะเปลี่ยนไปใช้ Webpack กันเพราะ เฟรมเวิร์คดังอย่าง Angular ยังได้เปลี่ยนมาใช้ Webpack เนื่องจากมีคุณสมบัติที่น่าทึ่งอย่างมาก
เกริ่นมากละครับ เริ่มกันเลย วิธีการติดตั้งกับคู่มือจะอยู่ใน NodeJS นะครับ เมื่อติดตั้งสำเร็จแล้ว ให้ลองพิมพ์คำสั่งใน CMD หรือ Terminal เลยครับ
node –version
เมื่อการติดตั้งสำเร็จด้วยดีหรือไม่มีปัญหาระหว่างการติดตั้ง ระบบจะแสดงข้อความเช่น v7.7.1
วิธีการติดตั้ง
ก่อนอื่น พวกเรามาติดตั้ง Webpack และ Webpack-dev-server (เพราะพวกเราต้องการใช้ในอนาคตครับผม) ในเครื่องที่เราต้องการใช้งาน
npm install -g webpack webpack-dev-server
สำหรับรายละเอียดเพิ่มเติมในส่วนนี้สามารถดูได้ที่ webpack docs
หลังจากนั้น เราสร้างแฟ้มข้อมูล my-project-name ผมใช้จะใช้ชื่อ webpack-demo ในการสอนครั้้งนี้ครับ
mkdir webpack-demo
cd webpack-demo
สร้างโปรเจ็ค
เราสามารถเปิดแฟ้มนี้ในเครื่องมือที่เพื่อน ๆ ชอบได้นะครับ โดยส่วนตัวผมเลือกใช้ VSCode ในวันนี้ สร้างไฟล์ index.html และใส่ code ตามด้านล่าง
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Basic application with Webpack</title> <link href="main.css"> </head> <body> <h1>WebPack works !!</h1> </body> </html>
แล้วเราสร้างไฟล์ในแฟ้มที่เราใช้งานอยู่และวาง Code ง่ายในข้างใน
console.log("Hello webpack. Demo works");
ตอนนี้เพื่อนๆ จะเห็นเราเพิ่ม bundle.js ใน index.html แต่เราจะใส่ main.js ลงในนี้ นั้นเพราะ Webpack จะห่อไฟล์ js ของเราและจะสร้าง bundle.js ในตอนท้าย เราจะทำโดยรันคำสั่ง
webpack main.js bundle.js
ผลลัพธ์จะเป็นลักษณะนี้
Hash: ec10d1136042776794c4 Version: webpack 2.6.1 Time: 71ms Asset Size Chunks Chunk Names bundle.js 2.65 kB 0 [emitted] main [0] ./main.js 19 bytes {0} [built]
ถ้าเราเปิดไฟล์ index.html ผ่าน Chrome debugger จะเป็นแบบนี้
เรายังสามารถสร้างไฟล์ css ให้แสดงใน index.html ได้โดยสร้าง main.css ในแฟ้มโปรเจ็คและเพิ่มรูปแบบลักษณะต่าง ๆ เราจะเพิ่มพื้นหลังสีเทาและตัวหนังสือh1 เป็นสีฟ้า
body{ background: #dcdcdc; } h1{ color: blue; }
ใช้งาน webpack config file
เราสามารถบอก webpack ว่าจะทำอะไรผ่าน webpack.config.js และนั้นจะทำให้เราสามารถใช้คำสั่ง webpack โดยไม่ต้องผ่าน main.js และ bundle.js และนี้เป็นวิธีที่เจ๋ง เมื่อเราเพิ่มเติมและตั้งค่าทีหลังได้ด้วย
สร้างไฟล์ webpack.config.js ในแฟ้มโปรเจ็คของเราและใส่ Code ตามด้านล่างนี้
module.exports = { entry: './main.js', output: { filename: './bundle.js' } };
การตั้งค่านั้นง่ายมาก entry นีคือบอกว่าไฟล์เราอยู่ที่ไหน และ output คือไฟล์ที่ส่งออก เนื่องจากไฟล์ที่ส่งออกของเราเป็น index.html เมื่อเราทำเสร็จแล้วทดลองรันคำสั่ง webpack ในแฟ้มโปรเจ็คของเราผ่าน cmd/terminal เราจะควรเห็นได้ผลลัพธ์เหมือนเดิมบนคอนโซล
ดูและสร้างเลย
เราสามารถบอก webpack ในดูไฟล์ต่างๆ ของเราและรันสร้างขั้นตอนการทำงานเมื่องเราแก้ไขไฟล์ได้โดยเพิ่ม watch: true ใน webpack.config.js ไฟล์ของเราจะได้เป็นอย่างนี้
module.exports = { entry: './main.js', output: { filename: './bundle.js' }, watch: true };
เราสามารถรันคำสั่ง webpack และถ้าเราแก้ไขอะไรลงไปใน main.js ต่อมา webpack จะทำการประมวลผลและสร้าง bundle.js
Development Server
นี่เป็นส่งที่เจ๋งอย่างหนึ่ง เพราะการที่เราไล่เปิด index.html มันล้าสมัยไปแล้วตอนนี้เราสามารถแก้ไขไปด้วยแล้วเห็นผลลัพธ์ทันที เราสามารถทำได้โดยใช้ webpack-dev-server ที่เราติดตั้งไว้ก่อนหน้านี้ แค่เราไปที่แฟ้มโปรเจ็คเราโดยผ่าน cmd/terminal แล้วรันคำสั่ง
webpack-dev-server
ปัง! เราจะเห็นทั้งหมดใน http://localhost:8080/webpack-dev-server/
ถ้าเราแก้ไขข้อมูลใน main.js หรือ main.css ใน Server จะเปลี่ยนการแสดงผลอัตโนมัติโดยที่เราไม่ต้องพิมพ์คำสั่ง ctrl+R / command+R ตลอดเวลา เจ๋งใช่มะละ
Loaders
Loaders สามารถเป็นตัวพิจารณางานทุกงานแบบในเครื่องมือเก่าๆ สามารถใช้ในการทำสิ่งต่าง ๆ เช่น require() เพื่อโหลดโมดูลและไฟล์ต่างๆ Webpack นั้นไม่ได้รวม loaders มาแต่แรก เพราะจะทำให้แอพหนักเกินไป ฉะนั้นตัว loaders สามารถหามาลงผ่าน npm หรือ yarn แทน เราจะใช้ npm ในการสอนครั้งนี้และจะใช้ babel-loader ในการเขียน ES6 code และ css-loader กับ style-loader เพื่อ import ไฟล์ main.css ภายใน main.js
เปิด Cmd / terminal จากแฟ้มโปรเจ็คของเราและรันคำสั่ง
npm init -y npm install --save-dev babel-loader babel-core babel-preset-env npm install --save-dev css-loader style-loader
npm init -y สร้าง package.json ในแฟ้มโปรเจ็คของเรา ซึ่งเราจะใช้บันทึกพัฒนาและเพิ่มตัวโหลดลงในแฟ้มโปรเจ็คของเรา
ตอนนี้เราต้องแก้ไฟล์ webpack.config.js ให้ได้ตามนี้เลยครับผม
module.exports = { entry: './main.js', output: { filename: './bundle.js' }, watch: true, module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] },{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env'] } } }] } };
ตอนนี้เราสามารถเขียน ES6 code ใน main.js ของเรา โดยให้เปลี่ยนข้อมูลตามนี้นะครับ
import style from './main.css'; const appName = 'Webpack Demo App'; setTimeout( () => alert(`Thanks for using ${appName}`) , 500);
ใน css เราสามารถลบ ในไฟล์ index.html นั้นเพราะเราได้นำเข้าจาก main.js แล้วครับผม
ข้อสรุป
Webpack เป็นเครื่องมือที่เจ๋งในการพัฒนาเว็ปไซต์ ซึ่งสามารถทำงานได้หลาย packages และสามารถทำซ้ำได้เรื่อยๆ ง่ายดาย ถ้าบทความสอนนี้ช่วยเพื่อนๆ ได้ รบกวนแชร์ต่อด้วยนะครับ
เตรียมพบกับหลักสูตร WEEKEND COURSE (NODE.JS) เรียนกัน 6 เดือน
- คอร์สเรียนเสาร์-อาทิตย์
- ฝึกงานกับบริษัทจริง หรือ
เลือกทำ Project จากบ้านก็ได้ - Speed Dating Day เลือกบริษัทที่ใช่กว่า 30 บริษัท
- เวลาปรึกษา TA Online ผ่าน Google Hangout ได้
รายละเอียดเพิ่มเติม คลิกที่นี่