close

Webpack คู่มือสำหรับผู้เริ่มต้น

Webpack เป็นเครื่องมือที่มีประโยชน์อย่างมากในการพัฒนาเว็บสมัยใหม่ ช่วยในการจัดการทรัพยากรและการเพิ่มประสิทธิภาพสำหรับโครงการต่างๆ นี่คือคำแนะนำพื้นฐานสำหรับผู้มาใหม่เกี่ยวกับวิธีใช้ Webpack:

ติดตั้ง Webpack

ประการแรก ติดตั้ง Node.js หากคุณยังไม่ได้ติดตั้ง จากนั้น สร้างไดเร็กทอรีสำหรับโปรเจ็กต์ของคุณและเปิดหน้าต่าง Terminal/Command Prompt ในไดเร็กทอรีนั้น เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Webpack และ webpack-cli(อินเทอร์เฟซบรรทัดคำสั่งของ Webpack):

npm install webpack webpack-cli --save-dev

สร้าง Webpack การกำหนดค่า

สร้างไฟล์ชื่อ webpack.config.js ในรูทของไดเร็กทอรีโปรเจ็กต์ของคุณ นี่คือที่ที่คุณจะกำหนด Webpack ค่า 

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

สร้างโฟลเดอร์และไฟล์

สร้าง src โฟลเดอร์ในไดเร็กทอรีรูท และภายในโฟลเดอร์ ให้สร้างไฟล์ชื่อ index.js เพื่อใช้เป็นไฟล์หลักสำหรับแอปพลิเคชันของคุณ

วิ่ง Webpack

เปิด Terminal และรันคำสั่งต่อไปนี้เพื่อคอมไพล์ซอร์สโค้ดของคุณโดยใช้ Webpack:

npx webpack

หลังจากรันคำสั่งนี้ Webpack จะทำตามคอนฟิกูเรชัน คอมไพล์ index.js ไฟล์ และสร้างไฟล์เอาต์พุตที่มีชื่อ bundle.js ใน dist ไดเร็กทอรี

ใช้ใน HTML

สร้างไฟล์ HTML ใน dist ไดเรกทอรีหรือตำแหน่งที่คุณต้องการและเชื่อมโยงไปยัง bundle.js ไฟล์:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

เรียกใช้แอปพลิเคชัน

เปิดไฟล์ HTML ในเบราว์เซอร์ของคุณและตรวจสอบว่าแอปพลิเคชันของคุณทำงานอยู่หรือไม่

นี่เป็นเพียงคำแนะนำเบื้องต้นเท่านั้น Webpack มีคุณสมบัติที่ทรงพลังมากมาย เช่น การจัดการ CSS, การจัดการโมดูล, การใช้ตัวโหลดและปลั๊กอิน, การปรับแต่งซอร์สโค้ด และอื่นๆ อีกมากมาย สำรวจ Webpack เอกสารอย่างเป็นทางการเพื่อใช้ประโยชน์จากความสามารถของเครื่องมือนี้อย่างเต็มที่