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

ในโลกปัจจุบันมีการพัฒนาเว็ปไซต์ด้วยเครื่องมือและแพ็คเกตสุดเจ๋งมากมายให้พวกเราสามารถนำไปต่อยอดได้กัน อดีตที่ผ่านมามีเครื่องมือมากมายเหมือนกัน แต่ตัวที่นิยมมากจะเป็น 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 ได้

รายละเอียดเพิ่มเติม คลิกที่นี่