การกำหนดค่ารายการแนวคิดหลักของ Webpack (รายการ)

หากการขึ้นต่อกันของแต่ละโมดูลในโปรเจ็กต์ถือเป็นแผนผัง รายการจะเป็นรากของแผนผังการขึ้นต่อกัน

โมดูลที่ต้องพึ่งพาเหล่านี้จะถูกห่อหุ้มเป็นชิ้นเมื่อบรรจุภัณฑ์ แล้วก้อนคืออะไร?

Chunk แท้จริงหมายถึงบล็อกโค้ด ซึ่งใน Webpack สามารถเข้าใจได้ว่าเป็นโมดูลบางตัวที่ได้รับการสรุปและจัดทำแพ็คเกจ มันเหมือนกับถุงไฟล์ที่บรรจุไฟล์จำนวนมาก ไฟล์ที่อยู่ภายในคือแต่ละโมดูลที่เพิ่มชั้นของบรรจุภัณฑ์ที่ด้านนอกเพื่อสร้างเป็นชิ้น:

ขึ้นอยู่กับการกำหนดค่าเฉพาะ ชิ้นหนึ่งหรือหลายชิ้นอาจถูกสร้างขึ้นเมื่อมีการบรรจุโครงการ

สามารถกำหนดได้หลายรายการในโปรเจ็กต์ และแต่ละรายการจะสร้างทรัพยากรผลลัพธ์

ตัวอย่างเช่น มีสองรายการในโปรเจ็กต์ของเรา src/index.js และ src/lib.js dist/index.js ใต้สถานการณ์ปกติ และ dist/lib.js

ในบางกรณีพิเศษ รายการหนึ่งอาจสร้างหลายชิ้นและสุดท้ายหลาย

รายการ

พารามิเตอร์:

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

module.exports = {
	entry:'./src/index.js', //ระบุไฟล์รายการ นั่นคือ เข้าสู่โครงการของเราจาก index.js};

①

หากเป็นประเภทอาร์เรย์ เมื่อใช้กับเอาต์พุต รายการการกำหนดค่าไลบรารี เฉพาะรายการสุดท้ายในอาร์เรย์ โมดูลของไฟล์รายการจะถูกส่งออก

② ชื่อกลุ่ม

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

• ถ้ารายการ เป็นสตริงหรืออาร์เรย์ จะมีเพียง Chunk เดียวเท่านั้นที่จะถูกสร้างขึ้น ในขณะนี้ ชื่อของ Chunk
• จะเป็นชื่อของ คีย์คู่คีย์-ค่าออบเจ็กต์

3. ไดนามิกการกำหนดค่า

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

// รายการฟังก์ชันซิงโครนัส: () => {
  กลับ {
    ก:'./pages/a',
    ข:'./pages/b',
  -
-
// รายการฟังก์ชันอะซิงโครนัส: () => {
  คืนสัญญาใหม่ ((แก้ไข)=>{
    แก้ไข ({
       ก:'./pages/a',
       ข:'./pages/b',
    -
  -
};

พารามิเตอร์: บริบท

Webpack จะใช้บริบทเป็นไดเรกทอรีรากเมื่อค้นหาไฟล์ที่มีเส้นทางสัมพัทธ์เป็น ค่าเริ่มต้นของบริบทไปยังไดเรกทอรีการทำงานปัจจุบันที่ Webpack เริ่มต้น หากคุณต้องการเปลี่ยนการกำหนดค่าเริ่มต้นของบริบท คุณสามารถตั้งค่าเช่นนี้ในไฟล์การกำหนดค่า:

module.exports = {
	บริบท: path.resolve(__dirname, 'app')
}

โปรดทราบว่าบริบทจะต้องเป็นสตริงเส้นทางที่แน่นอน

คอนฟิกูเรชันไฟล์รายการเดียวบริบท

โดยนำพารามิเตอร์ webpack --context เมื่อเริ่มต้น Webpack

การใช้งาน: entry:string|Array<string>

1. ไวยากรณ์ย่อ

webpack.config.js

//เนื่องจากเป็นแบบเดี่ยวจึงสามารถย่อเป็น:
โมดูล.ส่งออก = {
  รายการ: './main.js'
};

จริงๆ แล้วการกำหนดค่ารายการข้างต้นเขียนเป็นคำย่อดังนี้

module.exports = {
  รายการ: {
    หลัก: './main.js'
  -
};

2. ไวยากรณ์อาร์เรย์

module.exports = {
  รายการ: {
    หลัก:['./main.js','./main2.js']
  -
};

ฟังก์ชั่นการส่งผ่านในอาร์เรย์คือการรวมทรัพยากรหลายรายการไว้ล่วงหน้า เมื่อทำการบรรจุ Webpack จะใช้องค์ประกอบสุดท้ายในอาร์เรย์เป็นเส้นทางรายการจริง

เมื่อใช้สตริงหรืออาร์เรย์เพื่อกำหนดรายการเดียว way to change the chunk name. , can only be the default "main".

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

การใช้งาน: entry: {[entryChunkName: string]: string|Array}

ไวยากรณ์ของวัตถุ

module.exports = {
  รายการ: {
    แอป: './src/app.js',
    ผู้ขาย: './src/vendors.js'
  -
};

นี่จะยุ่งยากกว่านี้ อย่างไรก็ตาม นี่เป็นวิธีที่ขยายได้มากที่สุดในการกำหนดจุดเริ่มต้นในแอปพลิเคชัน

"การกำหนดค่า webpack แบบขยายได้" : นำมาใช้ใหม่และสามารถใช้ร่วมกับการกำหนดค่าอื่น ๆ ได้ นี่เป็นเทคนิคยอดนิยมสำหรับการแยกข้อกังวลออกจากสภาพแวดล้อม เป้าหมายในการสร้าง และรันไทม์ จากนั้นจึงรวมเข้าด้วยกันโดยใช้เครื่องมือพิเศษ เช่น webpack-merge

สถานการณ์การใช้งาน

1. แอปพลิเคชันหน้าเดียว

ไม่ว่าจะเป็นเฟรมเวิร์ก ไลบรารี หรือโมดูลในแต่ละหน้า จะถูกอ้างอิงโดยจุดเข้าเดียวของ app.js ข้อดีของสิ่งนี้คือ จะมีการสร้างไฟล์ JS เพียงไฟล์เดียวและการขึ้นต่อกันจะชัดเจน

โมดูล.ส่งออก = {
  รายการ: './src/app.js'
};

วิธีการนี้ก็มีข้อเสียเช่นกัน นั่นคือโมดูลทั้งหมดจะถูกรวมเข้าด้วยกัน เมื่อขนาดของแอปพลิเคชันเพิ่มขึ้นถึงระดับหนึ่ง ปริมาณทรัพยากรที่สร้างขึ้นจะมีขนาดใหญ่เกินไป ซึ่งจะทำให้ความเร็ว

ใน

การกำหนดค่าของ Webpack เมื่อบันเดิลมีขนาดใหญ่กว่า ที่ 250kB (ก่อนการบีบอัด) บันเดิลจะถือว่ามีขนาดใหญ่เกินไป และจะมีคำเตือนเกิดขึ้นระหว่างการบรรจุ ดังแสดงในรูป:

2. แยกไลบรารีบุคคลที่สาม (ผู้ขาย)

เพื่อแก้ไขปัญหาข้างต้น คุณสามารถแยกไลบรารีบุคคลที่สาม (ผู้ขาย) ได้

ผู้ขายหมายถึง "ซัพพลายเออร์" โดยทั่วไปผู้ขายจะหมายถึงบุคคลที่สามเช่นห้องสมุด และกรอบงานที่ใช้โดยโครงการ Bundle

module.exports = {
  รายการ: {
    แอป: './src/app.js',
    ผู้ขาย: ['react','react-dom','react-router'],
  -
};

ตามตัวอย่างของแอปพลิเคชัน เราได้เพิ่มทางเข้าใหม่ด้วยชื่อ chunk ของ vendor และใส่โมดูลของบุคคลที่สามที่โปรเจ็กต์ขึ้นอยู่กับในรูปแบบของอาร์เรย์

เราไม่ได้กำหนดเส้นทางรายการสำหรับผู้ขาย . Webpack ควรทำอย่างไร?

ในเวลานี้ เราสามารถใช้ CommonsChunkPlugin (CommonsChunkPlugin ถูกยกเลิกหลังจาก Webpack 4 คุณสามารถใช้ allowance.splitChunks) เพื่อแยกโมดูลทั่วไปในสองส่วนของแอปและผู้ขาย

ด้วยการกำหนดค่านี้ บันเดิลที่สร้างโดย app.js จะเป็นเพียงเท่านั้น ประกอบด้วย โมดูลธุรกิจและโมดูลของบริษัทอื่นที่ขึ้นอยู่กับจะถูกแยกออกเพื่อสร้างบันเดิลใหม่ ซึ่งบรรลุเป้าหมายของเราในการแยกผู้ขายด้วย

เนื่องจากผู้จำหน่ายมีเพียงโมดูลของบริษัทอื่นเท่านั้น ส่วนนี้จะไม่เปลี่ยนแปลงบ่อยครั้ง ดังนั้น การแคชฝั่งไคลเอ็นต์จึงสามารถนำมาใช้ประโยชน์ได้อย่างมีประสิทธิภาพ ซึ่งจะเพิ่มความเร็วในการเรนเดอร์โดยรวมเมื่อผู้ใช้ร้องขอเพจในภายหลัง

CommonsChunkPlugin ส่วนใหญ่จะใช้เพื่อแยกไลบรารีของบุคคลที่สามและโมดูลสาธารณะเพื่อป้องกันไม่ให้ไฟล์บันเดิลที่โหลดบนหน้าจอแรกหรือไฟล์บันเดิลที่โหลดตามความต้องการมีขนาดใหญ่เกินไป ส่งผลให้ใช้เวลาในการโหลดนาน

3. แอปพลิเคชันแบบหลายหน้า

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

module.exports = {
  รายการ: {
    เพจหนึ่ง: './src/pageOne/index.js',
    เพจสอง: './src/pageTwo/index.js',
    หน้าสาม: './src/pageThree/index.js'
  -
};

การกำหนดค่าข้างต้นบอก webpack ว่าต้องการกราฟการพึ่งพา 3 อันแยกกัน ในขณะนี้ รายการและเพจอยู่ในการติดต่อแบบหนึ่งต่อหนึ่ง เพื่อให้แต่ละ HTML สามารถโหลดโมดูลที่ต้องการได้ตราบเท่าที่แนะนำ JS ของตัวเอง