ในบทความนี้ เราจะอธิบายวิธีใช้ Webpack ในการพัฒนาโค้ด HTML/CSS ด้วยวิธีที่ง่ายที่สุด โดยใช้ตัวอย่างชุดเริ่มต้นที่เราใช้ที่ Outsourcify ซึ่งมีการกำหนดค่า Webpack 4
เหตุใดเราจึงควรใช้ตัวเรียกใช้งาน?
การพัฒนาเว็บฟรอนต์เอนด์ซึ่งโดยปกติแล้วจะเป็นการเขียนโค้ดที่เกี่ยวข้องกับ HTML, CSS และ Javascript เพียงอย่างเดียวนั้นได้ใช้ตัวเรียกใช้งานตามเครื่องมือบรรทัดคำสั่ง ซึ่งโดยปกติแล้วจะใช้ NPM ซึ่งเป็นตัวจัดการแพ็กเกจ NodeJS เป็นตัวช่วยเหลือมาสักระยะแล้ว ซึ่งไม่ได้หมายความว่า NodeJS จะเข้ามาเกี่ยวข้องในโครงการเลย แต่จำเป็นต้องติดตั้ง NodeJS เสียก่อนจึงจะเรียกใช้เครื่องมือพัฒนา Javascript บางตัวในเครื่องได้
เครื่องมือเหล่านี้จำเป็นสำหรับงานส่วนหน้าที่สำคัญบางอย่าง:
- การประมวลผลล่วงหน้า SCSS เป็น CSS
- การรวมไฟล์ Jaavscript ทั้งหมดเข้าเป็นไฟล์เดียว
- การย่อขนาดทั้ง CSS และ JS
- การเพิ่มประสิทธิภาพของภาพ
- ในกรณีของเรา การสร้างของเราจะสร้างหน้า HTML บางหน้าโดยใช้เทมเพลต ปลั๊กอิน Webpack จะรวบรวมเทมเพลตเข้าด้วยกัน โดยปกติแล้วเทมเพลตส่วนหัวและส่วนท้ายจะนำไปใช้ซ้ำกับทุกหน้าได้
เป้าหมายคือการสร้างเว็บไซต์คงที่ที่ปรับให้เหมาะสมซึ่งพร้อมเผยแพร่ทางออนไลน์จากไฟล์ SCSS, JS และ HTML ต่างๆ ทั่วโลก แน่นอนว่าทั้งหมดนี้สามารถทำได้แตกต่างกันออกไป งานบางอย่างสามารถจัดการได้ด้วยซอฟต์แวร์เฉพาะ (เช่น Koala) หรือ IDE (Visual Studio จัดการได้) แต่คุณจะไม่ได้รับความยืดหยุ่นของเครื่องมือบรรทัดคำสั่ง
เหตุใด Webpack จึงทำได้ดีกว่า?
ปัจจุบันนี้ เมื่อพัฒนาฟรอนต์เอนด์ ส่วนใหญ่มักจะใช้ Webpack แต่ก็มีทางเลือกอื่น ๆ ให้เลือกเสมอ เช่น Grunt และ Gulp เราใช้ Gulp อยู่พักหนึ่ง ร่วมกับ Bower ซึ่งมักใช้เพื่อรวมไลบรารี jQuery เข้าด้วยกันเมื่อไม่กี่ปีที่ผ่านมา จนกระทั่งทีมงานของ Bower หยุดดูแลและแนะนำให้เปลี่ยนมาใช้ Webpack (ซึ่งเราทำในช่วงเวลานั้น เพราะดูชัดเจนว่าแม้แต่คนของ Bower ก็บอกให้คุณเปลี่ยน) นอกจากนี้ เรายังใช้ Browserify ซึ่งช่วยให้เราได้รับผลลัพธ์แบบเรียลไทม์ในเบราว์เซอร์ขณะเขียนโค้ด การบันทึกไฟล์จะโหลดเบราว์เซอร์ใหม่ทันที ทั้งหมดนี้ได้รับการจัดการโดยปลั๊กอิน Webpack แล้วในปัจจุบัน
Webpack จัดการงานต่าง ๆ จำนวนมากโดยตรง และยังมีระบบของปลั๊กอินโอเพนซอร์สที่สามารถทำได้แทบทุกสิ่งที่คุณต้องการ ตัวอย่างสิ่งที่ Webpack อนุญาต ได้แก่:
- การกำหนดค่าที่แตกต่างกันสำหรับการพัฒนา/การผลิต ไม่จำเป็นต้องย่อขนาดในโหมดการพัฒนา เช่น
- การเปลี่ยนโมดูลร้อน: ไม่ต้องโหลดซ้ำอีกต่อไป การบันทึกไฟล์จะแสดงผลการคอมไพล์และโหลดเบราว์เซอร์ใหม่โดยอัตโนมัติ
- JS สมัยใหม่: แปลง ES2015+ Javascript เพื่อให้ยังสามารถทำงานบนเบราว์เซอร์รุ่นเก่าได้
จุดประสงค์เดิมของ Webpack คือการรวม Javascript เข้าด้วยกัน ซึ่งหมายถึงการรวมโค้ด javascript ทั้งหมดของโปรเจ็กต์และสิ่งที่ต้องพึ่งพาไว้ในไฟล์ Javascript ไฟล์เดียวที่สามารถอ้างอิงจาก HTML ได้ ซึ่งถือเป็นสิ่งที่จำเป็นอย่างยิ่งเมื่อพัฒนาด้วย React.JS หรือ Vue.JS เป็นต้น บทความนี้จะกล่าวถึงการใช้ Webpack ไม่เพียงแต่เพื่อจัดกลุ่ม Javascript ของฟรอนต์เอนด์เท่านั้น แต่ยังรวมถึง CSS และ HTML ด้วย
ชุด Strater สำหรับบูตสแตรปโครงการ HTML
เป้าหมายของเราที่นี่คือการสร้างหน้า HTML สำหรับเว็บไซต์ สมมติว่าเราได้รับไฟล์ Adobe XD ที่เก็บดีไซน์ของเว็บเพจหลายหน้า โดยทั้งหมดใช้ส่วนหัวและส่วนท้ายร่วมกัน
การสร้างคอนฟิกูเรชัน Webpack อาจเป็นเรื่องน่าเบื่อเล็กน้อย โดยเฉพาะอย่างยิ่งสำหรับโปรเจ็กต์ขนาดเล็กที่คุณไม่มีเวลาเริ่มต้นตั้งแต่ต้น นั่นคือเหตุผลที่เรามีชุดเริ่มต้นนี้เพื่อเริ่มต้นโปรเจ็กต์การออกแบบเป็น HTML ที่เรียบง่ายได้อย่างรวดเร็ว คุณสามารถค้นหาชุดเริ่มต้นได้ในบัญชี Github ของเรา:
https://github.com/outsourcify/HTMLWebpackStarterKit
มันถือไฟล์เหล่านี้:
├── src
│ │ contact.html
│ │ index.html
│ ├───fonts
│ │ font
│ ├───images
│ │ │ logo.png
│ │ ├───general
│ │ │ vertical-horizontal.png
│ │ └───icons
│ │ star.png
│ ├───js
│ │ index.js
│ ├───scss
│ │ │ main.scss
│ │ │ postcss.config.js
│ │ ├───components
│ │ │ _button.scss
│ │ │ _form.scss
│ │ │ _icon.scss
│ │ │ _normalize.scss
│ │ │ _typography.scss
│ │ │ _variables.scss
│ │ └───pages
│ │ base.scss
│ ├───blocks
│ │ footer.html
│ │ header.html
│ └───pages
│ index.html
│ about.html
│ contact.html
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.jsเป็นเพียงสิ่งที่ต้องเริ่มต้นและสามารถปรับให้เข้ากับมันได้อย่างง่ายดาย ที่นี่เรามีไฟล์ HTML 2 ไฟล์ (index.html และ contact.html) ซึ่งควรใช้ footer.html และ header.html ไฟล์เดียวกัน SCSS ที่นี่เป็นแบบกำหนดเองโดยเฉพาะ แต่สามารถใช้เฟรมเวิร์กเช่น Bootstrap ได้ Javascript อยู่ใน index.js เราจะมาพูดถึงเรื่องนั้นในภายหลัง
ขั้นแรกคุณต้องติดตั้ง Git และ NPM บนคอมพิวเตอร์ของคุณ NPM ติดตั้งพร้อมกับ Node.js ซึ่งเป็น Node Package Manager ที่ให้คุณดาวน์โหลดไลบรารี Javascript ที่จำเป็นในโครงการได้ (Webpack เป็นไลบรารี Javascript เช่นเดียวกับปลั๊กอินทั้งหมด) แน่นอนว่าทุกอย่างใน NPM เป็นโอเพ่นซอร์ส
- การโคลนที่เก็บข้อมูล
เมื่อติดตั้ง Git แล้ว โดยทั่วไปคุณจะสามารถเปิดซอฟต์แวร์บรรทัดคำสั่ง “Git Bash” ในโฟลเดอร์ได้โดยคลิกขวาที่ไฟล์ จากนั้นคุณเพียงแค่เปิดคำสั่งนี้เพื่อดาวน์โหลดที่เก็บข้อมูล:
git โคลน https://github.com/outsourcify/HTMLWebpackStarterKit.git .
ค้นหา URL ได้โดยคลิกที่ปุ่มสีเขียว “โคลนหรือดาวน์โหลด” ของ Github คุณสามารถเว้นจุดไว้ในบรรทัดคำสั่ง หรือ git จะสร้างโฟลเดอร์ชื่อ “HTMLWebpackStarterKit”
- การติดตั้งแพ็กเกจ
สิ่งแรกที่ต้องทำคือติดตั้งสิ่งที่ต้องพึ่งพาทั้งหมด ซึ่งทำได้โดยใช้บรรทัดคำสั่งง่ายๆ
การติดตั้ง npm
มันทำหน้าที่ตรวจสอบไฟล์ packages.json เพื่อหา dependencies และ devDependencies และติดตั้งในโฟลเดอร์ “node_nodules” “devDependencies” คือไลบรารีที่ไม่ได้ใช้ในโครงการของคุณแต่ใช้เพื่อสร้างโค้ดของโครงการระหว่างการพัฒนา: webpack รวมถึง babel ซึ่งเป็นคอมไพเลอร์ Javascript, Terser ซึ่งย่อ Javascript (แทนที่ UglifyJS), เครื่องมือ CSS ต่างๆ (SASS, autoprefixer) และยังมี webpack-dev-server ซึ่งเป็นเซิร์ฟเวอร์พัฒนาที่ให้การรีโหลดเบราว์เซอร์แบบเรียลไทม์
ไฟล์ “package-lock.json” จะบอก NPM ว่าเราต้องการติดตั้งไลบรารีเวอร์ชันใด เนื่องจากไฟล์ “package.json” จะให้เฉพาะเวอร์ชันที่จำเป็นเท่านั้น ชุดเริ่มต้นนี้เพิ่งได้รับการอัปเดตด้วยเวอร์ชันล่าสุดของ Webpack และปลั๊กอินต่างๆ ซึ่งทำงานได้ดีเหมือนในปัจจุบัน “package-lock.json” ช่วยให้คุณได้เวอร์ชันที่ทำงานร่วมกันได้ดี ไลบรารีที่แตกต่างกัน 20 ไลบรารีที่ใช้นั้นได้รับการจัดการโดยทีมงานต่างๆ ที่คอยปรับปรุงไลบรารีเหล่านี้อย่างต่อเนื่อง แต่ไลบรารีเหล่านี้อาจทำให้เกิดความไม่เข้ากัน ดังนั้นควรอัปเกรดด้วยความระมัดระวัง
เรียกใช้ภารกิจแรกของคุณ
ตอนนี้คุณพร้อมที่จะรันงานบางอย่างที่รวมอยู่ในไฟล์ package.json แล้ว:
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode development",
"dist": "webpack --mode production",
"watch": "webpack --watch --mode development"ในการรันงานสร้างการพัฒนา เพียงเปิด:
npm รันสร้าง
ซึ่งจะสร้างโฟลเดอร์ “build” ที่มีไฟล์ HTML, CSS และ JS ที่คุณสร้าง รวมถึงรูปภาพด้วย งาน dist จะทำแบบเดียวกัน แต่จะสร้างไฟล์ที่พร้อมสำหรับการผลิตและย่อขนาดแล้ว
npm เริ่มการทำงาน
คำสั่งนี้จะเปิดเบราว์เซอร์ด้วยหน้า index.html และทุกครั้งที่คุณบันทึกไฟล์ SCSS หรือ JS มันจะโหลดเบราว์เซอร์ใหม่โดยอัตโนมัติ
ทำความเข้าใจการกำหนดค่า Webpack
ตามตรรกะแล้ว “webpack.config.js” มีคำสั่งในการแจ้งให้ Webpack ทราบว่าเราต้องการให้ดำเนินการงานใด
โดยทั่วไปแล้ว จะบอกว่าต้องใช้ไลบรารีใด และต้องทำอะไรกับไลบรารีเหล่านั้น ไฟล์ต้นฉบับอยู่ที่ไหน (ในที่นี้ ไฟล์ “รายการ” ทั้งหมดอยู่ในโฟลเดอร์ “src/”) และควรส่งออกไฟล์ที่สร้างขึ้นไปที่ใด (ในที่นี้อยู่ใน “build/”) นอกจากนี้ยังบอกด้วยว่าควรใช้ “ตัวโหลด” ใดสำหรับไฟล์แต่ละประเภท JS จะถูกแปลงและคอมไพล์ SCSS จะได้รับการประมวลผลล่วงหน้า รูปภาพจะถูกบีบอัด ฯลฯ โดยแต่ละไฟล์จะใช้ปลั๊กอินที่เหมาะสม
ตรวจสอบโค้ดในไฟล์นี้ ซึ่งอธิบายตัวเองได้ค่อนข้างดี จุดประสงค์ของบทความนี้ไม่ใช่เพื่ออธิบายวิธีการกำหนดค่า Webpack แต่เพื่อเริ่มต้นอย่างรวดเร็วด้วยชุดเริ่มต้นของเรา
เพิ่มไลบรารี Javascript บางส่วน
ตอนนี้ถึงเวลาเขียนโค้ด HTML แล้ว เพิ่มส่วนต่างๆ ลงในหน้าต่างๆ ของคุณ ส่วนที่สำคัญคือต้องปฏิบัติตามโครงสร้างโฟลเดอร์ในโฟลเดอร์ “src/” ไฟล์ HTML ต่างๆ ที่คุณต้องการสร้างควรอยู่ในโฟลเดอร์ “src/pages” หน้า HTML ใหม่ที่สร้างขึ้นจะต้องเพิ่มไว้ที่นี่
จากนั้นหากต้องการเพิ่มบล็อกลงในเพจของคุณ ให้ใช้รูปแบบนี้:
<%= require('html-loader!../blocks/header.html') %>รุ่นนี้รวมปลั๊กอินตกแต่ง HTML เพื่อทำให้โค้ดของคุณดูสวยงาม
แทนที่จะทำเช่นนั้น เราสามารถใช้โปรแกรมสร้างเทมเพลต Javascript เช่น Pug ก็ได้ แต่รูปแบบไวยากรณ์ที่เรียบง่ายนี้ก็ใช้ได้ดีหากคุณต้องการเขียน HTML โดยตรง
ชุดเริ่มต้นสำหรับสร้างหน้า HTML หลายหน้า
ตอนนี้คุณมีชุดเริ่มต้นสำหรับสร้างหน้า HTML ที่เป็นมิตรกับ SEO โดยมีไฟล์ CSS และ JS แบบย่อขนาดเพียงไฟล์เดียวเพิ่มเข้าไปในแต่ละหน้า แน่นอนว่าเราไม่ได้กล่าวถึงขอบเขตทั้งหมดของสิ่งที่ NPM และ Webpack นำเสนอในบทความนี้ เราจะอธิบายในบทความต่อไปว่าจะนำเข้าเฟรมเวิร์ก CSS เช่น Bootstrap และไลบรารี Javascript เช่น ปลั๊กอินสไลเดอร์ได้อย่างง่ายดายอย่างไร
