Webpack: ทีละสิ่ง

ทุกครั้งที่ฉันพยายามเรียนรู้เกี่ยวกับสคริปต์บิลด์ บันเดิลหรือ doohickeys จาวาสคริปต์อื่นๆ ฉันประสบปัญหาในการค้นหาบทช่วยสอนที่ไม่ต้องการให้ฉันตั้งค่าทุกอย่าง

เมื่อคุณกำลังเรียนรู้ คุณไม่จำเป็นต้องตั้งค่าแอป React/Redux ด้วยการทดสอบ Sass และ Flow และ Jest บางครั้งคุณเพียงต้องการทำสิ่งหนึ่งสิ่งใดในแต่ละครั้ง

บทช่วยสอนนี้เกี่ยวกับการตั้งค่าโครงการ Webpack และเราจะดำเนินการให้น้อยที่สุดเท่านั้น

Webpack เป็นตัวรวม Javascript, HTML, CSS, Sass, JSX หรือไฟล์อื่นๆ ทั้งหมดของคุณจะถูกรวมเป็นไฟล์หนึ่งหรือสองไฟล์

นอกเหนือจากการให้คุณใช้เทคโนโลยีเช่น "Sass" หรือ "React" แล้ว Webpack ยังช่วยให้คุณแบ่งไฟล์ของคุณได้อย่างง่ายดาย และใช้ไวยากรณ์ของโมดูล ES6 เช่น:

import myThing from './myThing.js'

การติดตั้ง

หากต้องการติดตั้ง Webpack เพียงเรียกใช้:

npm install webpack -g

ไฟล์กำหนดค่า

แค่มี Webpack เท่านั้นยังไม่พอ ในโปรเจ็กต์ของคุณ คุณจะต้องมีไฟล์ webpack.config.js นี่คือที่ที่คุณอธิบายให้ webpack ทราบว่าคุณต้องการทำอะไร

ฉันเริ่มต้นด้วยโครงสร้างไฟล์ที่มีลักษณะดังนี้:

เริ่มต้นด้วยตัวอย่างง่ายๆ อย่างไม่น่าเชื่อ:

module.exports = {
  entry: './src/app.js', // This tells webpack where to start
  output: {
    filename: './build/bundle.js' // This tells webpack the output
  }
};

ในกรณีที่คุณไม่เคยเห็นไวยากรณ์ module.exports มาก่อน คุณควรตรวจสอบเอกสารประกอบของโมดูลสำหรับโหนด:

มาลองดูกัน!

ลองเรียกใช้ $ webpack ในบรรทัดคำสั่งในโฟลเดอร์โครงการของคุณ (โปรดทราบว่าฉันใช้ $ เพื่อระบุว่าควรเรียกใช้จากบรรทัดคำสั่ง ไม่รวม $ ไว้ในคำสั่งของคุณ) คุณจะเห็นสิ่งที่ต้องการ:

คุณควรสังเกตว่า webpack สร้างโฟลเดอร์ build สำหรับเราโดยมีไฟล์ bundle.js อยู่ข้างใน ในขณะนี้ คุณไม่จำเป็นต้องกังวลกับโค้ดที่โค้ดสร้างขึ้นสำหรับคุณ

มาทำอะไรสักอย่างกันเถอะ

สร้างไฟล์ใหม่ชื่อ hello.js ในโฟลเดอร์เดียวกับ app.js ของคุณ

ในไฟล์นั้น มากำหนดฟังก์ชันแล้วส่งออก

// src/hello.js
function myFunction() {
  console.log("Hello Webpack!")
}
module.exports = myFunction

จากนั้นใน app.js ของคุณ ให้ใช้ require ฟังก์ชันนั้นแล้วเรียกมันว่า

// src/app.js
var myFunction = require('./hello.js')
myFunction();

ถ้าเรารัน $ webpack ตอนนี้ เราควรจะเห็นโค้ดของเราปะติดปะต่อกับสิ่งต่างๆ มากมายที่เราไม่ได้เขียน

ตอนนี้สำหรับ HTML บางส่วน

แม้ว่าส่วนต่อไปนี้จะไม่ใช่แนวทางปฏิบัติที่ดีที่สุด (เราจะมาดูวิธีดำเนินการอย่างถูกต้องอีกครั้ง) มาสร้างไฟล์ index.html ในโฟลเดอร์ build กันดีกว่า

ภายในไฟล์นั้น ให้รวมสคริปต์ของเราไว้ในบรรทัดเดียว

<!-- build/index.html -->
<script src="bundle.js"></script> 

ในตัวฉัน ฉันรวมเฉพาะแท็กสคริปต์เท่านั้น เบราว์เซอร์ส่วนใหญ่จะรวมแท็ก html และ body อื่นๆ ทั้งหมดไว้ให้คุณด้วย ดังนั้น เมื่อเล่นแบบนี้ เราไม่จำเป็นต้องกังวลเกี่ยวกับแท็กเหล่านั้น

หากคุณเปิดไฟล์นั้นใน Chrome และเปิดเครื่องมือ dev ด้วย cmd-opt-i บน Mac หรือ ctrl-shift-i บน Windows คุณจะเห็นเอาต์พุต console.log ของเราในคอนโซล!

มีปัญหา? รหัสทั้งหมดที่ฉันใช้มีอยู่ใน "บน Github"