เรียนรู้เพิ่มเติมเกี่ยวกับ webpack ของเครื่องมือบรรจุภัณฑ์โมดูล

1. webpack คืออะไร

1. คำอธิบายอย่างเป็นทางการ

โดยพื้นฐานแล้ว webpack เป็นเครื่องมือบรรจุภัณฑ์แบบโมดูลาร์คงที่สำหรับแอปพลิเคชัน JavaScript ในปัจจุบัน (ประโยคนี้สามารถสรุปได้จากสองประเด็น: โมดูล และ บรรจุภัณฑ์ )

มาพูดถึงแนวคิดของ โมดูล และ บรรจุภัณฑ์ กันดีกว่า!

2. การทำให้เป็นโมดูลส่วนหน้า

• โซลูชันบางอย่างสำหรับการทำให้เป็นโมดูลส่วนหน้า: AMD, CMD, CommonJS, ES6 (เบราว์เซอร์ ไม่สามารถจดจำ ได้ แต่ webpack สามารถให้ การสนับสนุนพื้นฐาน ก่อนที่จะดำเนินการพัฒนาแบบโมดูลาร์)
• ก่อน ES6 หากคุณต้องการทำให้เป็นโมดูล การพัฒนาต้องการ ความช่วยเหลือจากเครื่องมืออื่นๆ เพื่อให้เราสามารถดำเนินการพัฒนาโมดูลาร์ได้
• หลังจากเสร็จสิ้นโครงการผ่านการพัฒนาโมดูลาร์แล้ว เรายังต้องจัดการกับ การพึ่งพาต่างๆ ระหว่างโมดูลและ รวมและจัดทำแพคเกจ เหล่านั้น
• ในเวลานี้ webpack จะปรากฏขึ้น แกนหลักคือช่วยให้เราดำเนินการพัฒนา โมดูลาร์ และช่วยเราจัดการ กับการพึ่งพา ระหว่างโมดูล
• ไม่ใช่แค่ไฟล์ JavaScript เท่านั้น CSS , รูปภาพ , ไฟล์ json ฯลฯ ของเรายังสามารถใช้เป็น โมดูล ใน webpack ได้

3. จะเข้าใจบรรจุภัณฑ์ได้อย่างไร?

• Webpack สามารถช่วยให้เรา แยกส่วน และจัดการกับ ความสัมพันธ์ที่ซับซ้อน ต่างๆ ระหว่างโมดูล แนวคิดของบรรจุภัณฑ์นั้นง่ายต่อการเข้าใจ
• เป็นการรวมโมดูลทรัพยากรต่างๆ ใน ​​webpack ให้เป็นหลายแพ็คเกจ (Bundle)
• ในระหว่างกระบวนการบรรจุ ทรัพยากรยังสามารถประมวลผลได้ เช่น การบีบอัดรูปภาพ การแปลง scss เป็น css และการแปลงไวยากรณ์ ES6 เป็น ES5 ไปยัง JavaScript และการดำเนินการอื่น ๆ
• เครื่องมือบรรจุภัณฑ์รวมถึง ฮึดฮัด/อึก

การเปรียบเทียบระหว่าง webpack และฮึดฮัด/

• อึก
  1. คุณสามารถ กำหนดค่า ชุดของงานและกำหนด ธุรกรรม ที่จะประมวลผลโดยงานต่างๆ (เช่น ES6, การแปลง ts, การบีบอัดรูปภาพ, การแปลง scss เป็น css)
  2. จากนั้นให้ฮึดฮัด/อึก ดำเนินการ งานเหล่านี้ตามลำดับ และ ทำให้กระบวนการทั้งหมดเป็นแบบอัตโนมัติ

• เพื่อดูงานอึก
  1. งานต่อไปนี้คือการแปลงไฟล์ js ทั้งหมดภายใต้ src ให้เป็นไวยากรณ์ ES5
  2. และสุดท้ายก็ส่งออกไปยังโฟลเดอร์ dist
  

• เมื่อใดจึงควรใช้คำฮึดฮัด/อึก?
  1. การพึ่งพาโมดูลโครงการนั้นง่ายมาก และไม่ได้ใช้แนวคิดของการทำให้เป็นโมดูลด้วยซ้ำ
  2. เพียงใช้ grunt/gulp เพื่อการผสานและการบีบอัดแบบง่ายๆ
  3. หากทั้งโครงการใช้การจัดการแบบโมดูลาร์และการพึ่งพาซึ่งกันและกันมีความแข็งแกร่งมาก เราสามารถใช้ webpack ได้

• อะไรคือความแตกต่างระหว่าง grunt/gulp และ webpack?
  1. การแสดงฮึดฮัด/อึก ให้ความสำคัญกับระบบอัตโนมัติของกระบวนการส่วนหน้า และการทำให้เป็นโมดูลไม่ใช่แกนหลัก
  2. Webpack ให้ความสำคัญกับการจัดการการพัฒนา โมดูลาร์ มากขึ้น และมีฟังก์ชันต่างๆ เช่น การบีบอัดไฟล์ การรวม และการประมวลผลล่วงหน้า

2. การติดตั้ง webpack

( wepack ต้องอาศัยสภาพแวดล้อม ของโหนด สำหรับการทำงานปกติ และสภาพแวดล้อมของโหนดจะต้องเป็น) จำเป็นสำหรับการดำเนินการตามปกติ ใช้ เครื่องมือ npm เพื่อจัดการ แพ็คเกจที่ต้องพึ่งพาต่างๆ ในโหนด)

• ดังนั้นในการติดตั้ง webpack คุณต้องติดตั้ง Node.js ก่อน โดยจะมาพร้อมกับเครื่องมือการจัดการแพ็คเกจ npm
• เพื่อติดตั้ง webpack ทั่วโลก (npm ติดตั้ง webpack@ 3.6.0 -g) และ
• ติดตั้ง webpck ในเครื่อง (npm ติดตั้ง [email protected] --save-dev) –save-dev เป็นการพึ่งพาการพัฒนาและไม่จำเป็นต้องใช้หลังจากแพ็กเกจโปรเจ็กต์แล้ว

3. การกำหนดค่า Webpack

1. โฟลเดอร์ dist การวิเคราะห์ไฟล์และโฟลเดอร์

• : ใช้เพื่อจัดเก็บไฟล์ที่บรรจุในภายหลัง
• โฟลเดอร์ src: ใช้เพื่อจัดเก็บไฟล์ต้นฉบับที่เราเขียน
  main.js : ไฟล์รายการของโครงการ
  mathUtils.js : กำหนดฟังก์ชันเครื่องมือทางคณิตศาสตร์บางอย่างที่สามารถอ้างอิงและนำไปใช้ที่อื่นได้
  index.html : เบราว์เซอร์เปิด html หน้าแรกที่แสดง (อ้างอิงถึงที่นี่คือ เนื้อหาของไฟล์แพ็กเกจสุดท้ายใน src นั่นคือโฟลเดอร์ dist )
  package.json : สร้างผ่าน npm init ซึ่งเป็นไฟล์ที่จัดการโดยแพ็คเกจ npm

ต่อไปนี้เป็นรหัสในไฟล์ mathUtils.js และไฟล์ main.js : (ข้อกำหนดทั่วไปของ CommonJS, CommonJS เป็นมาตรฐานของการทำให้เป็นโมดูล, nodejs คือการใช้งานของ CommodJS (modularization))

2. คำสั่ง

webpack ./src/main.js ./dist/bundle.js (รวมไฟล์ main.js ลงในไฟล์ Bundle.js)

คำอธิบาย: ในทำนองเดียวกัน คุณยังสามารถใช้ข้อกำหนดจำเพาะแบบโมดูลาร์ ES6 ได้ด้วย

3. สร้างไฟล์ webpack.config.js เพื่อทำให้คำสั่ง packaging ง่ายขึ้น

(แมปคำสั่ง packaging กับ การเข้าและออก ของ packaging)

โค้ดในไฟล์นี้:

รายการ: สำหรับเอาต์พุตรายการแพ็กเกจ

: เราจำเป็นต้องได้รับเส้นทางใน

• เอาต์พุตทางออกแพ็กเกจแบบไดนามิก
• ดังนั้นเราจึงสามารถใช้ไวยากรณ์ Node.js เพื่อนำเข้าโมดูล โมดูลนี้เป็นไฟล์ภายในเครื่องหมายคำพูดของเส้นทาง (const path = need) ('เส้นทาง') จำเป็นต้องพบในแพ็คเกจโหนด)
• ใช้ node.js ผ่านคำสั่ง init npm (การเริ่มต้น)
• เพื่อสร้างไฟล์ package.json (ไฟล์นี้อธิบายข้อมูลของโครงการปัจจุบัน) ใบอนุญาต: "ISC" (โอเพ่นซอร์สสำหรับโครงการ) ต่อไปนี้คือ

คำอธิบายโค้ด package.json: หากคุณต้องการใช้โหนด คุณต้องพึ่งพาไฟล์ package.json

หลังจากรัน npm install [email protected] --save-dev การขึ้นต่อกันจะถูกเพิ่มดังนี้

4. การแมปคำสั่ง webpack กับ npm run

นอกเหนือจากการแมป webpack กับทางเข้า และ ออก คุณยังสามารถแมปคำสั่ง webpack กับ npm run สำหรับการดำเนินการบางอย่าง (จำเป็นต้องแก้ไขในแท็กสคริปต์ **"script"** ในแพ็คเกจ json) -

4. การใช้ตัวโหลด

1. ตัวโหลดคืออะไร

• Loader เป็นแนวคิดหลักใน webpack

ตอนนี้เรามาดูกันว่า webpack ใช้ทำอะไร?

• เราใช้ webpack เพื่อประมวลผลโค้ด js เป็นหลัก และ webpack จะจัดการการขึ้นต่อกันที่เกี่ยวข้องกับ js โดยอัตโนมัติ
• อย่างไรก็ตาม ในระหว่างการพัฒนา ไม่เพียงแต่จะประมวลผลด้วยโค้ด js พื้นฐานเท่านั้น แต่ยังต้องโหลด css, รูปภาพ และโค้ดขั้นสูงบางส่วนด้วย แปลง ES6 เป็น ES5, แปลง TypeScript เป็นโค้ด ES5, แปลง scss และน้อยกว่าเป็น css, แปลงไฟล์ .jsx, .vue เป็นไฟล์ js เป็นต้น
• สำหรับความสามารถของ webpack เอง การแปลงเหล่านี้ยังไม่ได้รับการสนับสนุน
• ในขณะนี้ เพียง ขยาย ตัวโหลด ที่เกี่ยวข้องไปยัง webpack

2. กระบวนการใช้งานตัวโหลด

1)

งานการเตรียมการสำหรับการประมวลผลไฟล์ css:

1. ในไดเร็กทอรี src ให้สร้างไฟล์ css สร้างไฟล์ Normal.css ในนั้น

2. จัดระเบียบโครงสร้างไดเร็กทอรีของไฟล์ใหม่และวางไฟล์ js ที่กระจัดกระจายไว้ในโฟลเดอร์ js

3. โค้ดใน Normal.css นั้นง่ายมาก กล่าวคือ ตั้งค่าเนื้อหาเป็นสีแดง

4. แต่สไตล์ใน Normal.css จะไม่มีผลในขณะนี้ เนื่องจากไม่มีการอ้างอิง และ Webpack ไม่พบมัน เนื่องจากเรามีเพียงหนึ่งรายการ และ Webpack จะค้นหาไฟล์ที่ต้องพึ่งพาอื่น ๆ โดยเริ่มจากรายการ

5. ในขณะนี้ เราต้องอ้างอิงใน main.js ซึ่ง เป็นไฟล์รายการ

หลังจากนั้นเราจำเป็นต้องนำเข้า ตัวโหลดที่เกี่ยวข้อง เพื่อใช้งาน!

• ขั้นตอนที่ 1 : ติดตั้งตัวโหลดที่คุณต้องการใช้ผ่าน npm
  (การติดตั้ง npm --save-dev css-loader) (การติดตั้ง npm --save-dev style-loader)
  ในเว็บไซต์อย่างเป็นทางการของ webpack ค้นหาวิธีการใช้ตัวโหลดสำหรับสไตล์ต่อไปนี้:
  
  

• ขั้นตอนที่ 2 : ให้คำแนะนำในการกำหนดค่าภายใต้คีย์เวิร์ด โมดูล ใน webpack.config.js

: css-loader รับผิดชอบเฉพาะ การโหลดไฟล์ css เท่านั้น และไม่รับผิดชอบในการฝังสไตล์ css เฉพาะลงในเอกสาร

ในเวลานี้ เรายังต้องการ style- ตัวโหลด ช่วยเราดำเนินการ

หมายเหตุ: ต้องวาง style-loader ไว้ด้านหน้า css-loader

2) ขั้นตอนการประมวลผลไฟล์น้อยลง

• 1 : ติดตั้งตัวโหลดที่เกี่ยวข้อง (หมายเหตุ: ติดตั้ง less ที่นี่ด้วย เนื่องจาก webpack จะใช้น้อยกว่าในการคอมไพล์ไฟล์น้อยลง) คำสั่ง: npm install --save-dev less-loader less

• ขั้นตอนที่ 2 : แก้ไขไฟล์การกำหนดค่าที่เกี่ยวข้อง (ใน webpack.config.js) และเพิ่มตัวเลือกกฎสำหรับการประมวลผลไฟล์ .less ดังต่อไปนี้:

3) การประมวลผลไฟล์ภาพ

• ขั้นตอนที่ 1 : เพิ่มสองภาพในโครงการ (หนึ่งภาพน้อยกว่า 8kb และอีกภาพหนึ่งมีขนาดมากกว่า 8kb)

• ขั้นตอนที่ 2 : ขั้นแรกให้พิจารณาอ้างอิงภาพในรูปแบบ css ดังนี้

  

• ขั้นตอนที่ 3 : แก้ไขไฟล์การกำหนดค่าที่เกี่ยวข้อง (ใน webpack.config.js) และเพิ่มตัวเลือกกฎสำหรับการประมวลผลไฟล์รูปภาพ ดังต่อไปนี้:

  

• ขั้นตอนที่ 4 : พบข้อผิดพลาดหลังจากการบรรจุภัณฑ์ เนื่องจากรูปภาพที่มีขนาดใหญ่กว่า 8kb จะถูกประมวลผลผ่าน file-loader แต่ไม่มีตัวโหลดไฟล์ในโครงการของเรา (คุณต้องติดตั้ง file-loader คำสั่ง npm install --save-dev file-loader) หลังจากการติดตั้งและแพ็กเกจ คุณจะพบว่ามีไฟล์รูปภาพเพิ่มเติมอยู่ในโฟลเดอร์ dist

  

คำอธิบาย:

• พบว่า webpack สร้างชื่อที่ยาวมากให้เราโดยอัตโนมัติ

  1. นี่คือค่าแฮชแบบ 32 บิตเพื่อป้องกันการซ้ำชื่อ
  2. อย่างไรก็ตาม ในการพัฒนาจริง อาจมีข้อกำหนดบางประการสำหรับชื่อของรูปภาพที่บรรจุ

• ดังนั้นเราจึงสามารถเพิ่มตัวเลือกต่อไปนี้ในตัวเลือก:

  1. img: โฟลเดอร์ที่จะบรรจุไฟล์
  2. ชื่อ: เอาชื่อเดิมของรูปภาพมาวางไว้ที่ตำแหน่งนี้
  3. Hash8: เพื่อป้องกันความขัดแย้งของชื่อรูปภาพ แฮชยังคงใช้อยู่ แต่จะถูกเก็บไว้เพียง 8 บิตเท่านั้น
  4. ต่อ: ใช้นามสกุลดั้งเดิมของรูปภาพดังนี้:
  

• คุณต้องกำหนดค่าและแก้ไขเส้นทางที่ใช้โดยรูปภาพในภายหลัง

  1. ตามค่าเริ่มต้น webpack จะส่งคืนเส้นทางที่สร้างขึ้นให้กับผู้ใช้
  2. อย่างไรก็ตาม โปรแกรมทั้งหมดถูกรวมไว้ในโฟลเดอร์ dist ดังนั้นคุณจึงต้องเพิ่ม dist/ อีกอันหนึ่งให้กับพาธ
  ดังต่อไปนี้:
  

สรุปหลังจากแพคแล้วไฟล์ภาพจะเป็นแบบนี้ครับ

4), ES6 ถึง ES5 บาเบล

5. กำหนดค่า Vue ใน webpack

• ขั้นตอนที่ 1: คำสั่งการดำเนินการเทอร์มินัล (การติดตั้ง npm --save vue)

• ขั้นตอนที่ 2: นำเข้า Vue ใน main.js (นำเข้า Vue จาก 'vue') ดังนี้

• ขั้นตอนที่ 3: วาง p บนอินสแตนซ์ vue ใน index.html ดังต่อไปนี้

• ขั้นตอนที่ 4: พบข้อผิดพลาดหลังจากการบรรจุภัณฑ์ เราจำเป็นต้องระบุว่า vue ที่เราใช้นั้นเป็นเวอร์ชัน รันไทม์คอมไพเลอร์

การดำเนินการเฉพาะ: คุณต้องเพิ่ม การแก้ไข ให้กับ webpack และใช้นามแฝง ( alias ) ดังนี้:

6. การใช้ Vue ใน webpack

ขั้นตอนที่ 1: วาง p บนอินสแตนซ์ vue ใน index.html

ขั้นตอนที่ 2: นำเข้าส่วนประกอบ APP ลงในไฟล์ main.js ลงทะเบียน APP ในอินสแตนซ์ Vue และ ใช้ APP ส่วนประกอบในเทมเพลต Vue ( ส่วนประกอบ )

ขั้นตอนที่ 3: สร้างไฟล์ APP.vue และแยก เทมเพลต ของเพจ vue ออกจาก โค้ด js และ โค้ด css ดังต่อไปนี้

ขั้นตอนที่ 4: กำหนดค่าตัวโหลดที่สอดคล้องกันของ vue

แก้ไขไฟล์การกำหนดค่าของ webpack.config.js:

7. การใช้ปลั๊กอิน

1. ทำความเข้าใจกับปลั๊กอิน

• ปลั๊กอินคืออะไร?
  1. Plugin หมายถึงปลั๊กอิน ซึ่งโดยปกติจะใช้เพื่อขยายสถาปัตยกรรมที่มีอยู่
  2. ปลั๊กอินใน webpack เป็นส่วนขยายต่างๆ สำหรับฟังก์ชันที่มีอยู่ของ webpack เช่น การเพิ่มประสิทธิภาพบรรจุภัณฑ์ การบีบอัดไฟล์ ฯลฯ
• ความแตกต่างระหว่างตัวโหลดและปลั๊กอิน
  1. Loader ส่วนใหญ่จะใช้ในการ แปลง โมดูลบางประเภท
  2. ปลั๊กอินคือปลั๊กอินซึ่งเป็นส่วนขยายของ webpack เอง และ
• กระบวนการใช้งานของปลั๊กอินส่วนขยาย
  1. ขั้นตอนที่ 1: การติดตั้งผ่าน npm ต้องใช้ปลั๊กอิน (ปลั๊กอินบางตัวที่สร้างไว้ใน webpack ไม่จำเป็นต้องติดตั้ง)
  2. ขั้นตอนที่ 2: กำหนดค่าปลั๊กอินในปลั๊กอินใน webpack.config.js

2. Webpack- เพิ่มข้อมูลลิขสิทธิ์การใช้ปลั๊กอิน

3. แพ็คเกจปลั๊กอิน html

4. ปลั๊กอินการบีบอัด js

8. สร้างเซิร์ฟเวอร์ท้องถิ่น

• Webpack จัดเตรียม เซิร์ฟเวอร์การพัฒนาท้องถิ่น ที่ เป็นตัวเลือก เซิร์ฟเวอร์ในเครื่องนี้สร้างขึ้นจาก node.js และใช้เฟรมเวิร์กด่วนภายใน .

• อย่างไรก็ตาม มันเป็นโมดูลแยกต่างหาก คุณต้องติดตั้งก่อนใช้งานใน webpck คำสั่ง: (npm install --save-dev [email protected])

• devserver ก็เป็น ตัวเลือก เช่นกัน สามารถกำหนด คุณสมบัติ ได้ดังนี้:
  1. contentBase: โฟลเดอร์ใดที่ให้บริการในเครื่อง ค่าเริ่มต้นคือโฟลเดอร์รูท เราจำเป็นต้องกรอก ./dist ที่นี่
  2. พอร์ต: หมายเลขพอร์ต
  3. อินไลน์: รีเฟรชหน้าแบบเรียลไทม์
  4. historyApiFallback: ในหน้า SPA

• การกำหนดค่าไฟล์ webpack.config.js ในโหมดประวัติที่อาศัย HTML5 ได้รับการแก้ไขดังนี้:
  

• พารามิเตอร์ –open หมายถึงการเปิดเบราว์เซอร์โดยตรง

นอกจากนี้

ด้านล่างนี้เราต้องการแยกไฟล์การกำหนดค่า webpack: นั่นคือแยกสิ่งที่จำเป็นสำหรับ การพัฒนา และสิ่งที่ใช้ใน การเผยแพร่ ( การคอมไพล์ ) ดังต่อไปนี้:

9. Vue CLI

1. CLI หมายถึงอะไร?

• เป็นอินเทอร์เฟซบรรทัดคำสั่งซึ่งแปลเป็นอินเทอร์เฟซบรรทัดคำสั่ง แต่รู้จักกันทั่วไปในชื่อ
• Vue CLI เป็นโครงโครงการ vue.js ที่เผยแพร่อย่างเป็นทางการ
• เมื่อใช้ vue-cli คุณสามารถ สร้างสภาพแวดล้อมการพัฒนา Vue และ การกำหนดค่า webpack ที่เกี่ยวข้องได้อย่าง

รวดเร็ว ข้อกำหนดเบื้องต้นสำหรับการใช้ Vue CLI - โหนด (จำเป็นต้องติดตั้งโหนด)

อย่างไรก็ตาม หากต้องการใช้ Node จะต้องเกี่ยวข้อง กับ

npm

• ชื่อเต็มของ NPM คือ Node Package Manager
• ซึ่งเป็นเครื่องมือการจัดการและการแจกจ่ายแพ็คเกจ NodeJS ได้กลายเป็นมาตรฐานที่ไม่เป็นทางการสำหรับการเผยแพร่โมดูลโหนด (แพ็คเกจ)
• มักใช้เพื่อติดตั้งแพ็คเกจที่ต้องพึ่งพาในระหว่างกระบวนการพัฒนา

3. ใช้ Vue CLI เพื่อ

• ติดตั้ง Vue scaffolding

npm install -g @vue/cli

หมายเหตุ: เวอร์ชันที่ติดตั้งด้านบนคือเวอร์ชัน Vue CLI3 หากคุณต้องการเริ่มต้นโปรเจ็กต์ตามวิธี Vue CLI2 คุณจะไม่สามารถ

• เริ่มต้นได้ โปรเจ็กต์ Vue CLI2

vue init webpack my -project