เอาท์พุต: การกำหนดค่าตัวเลือกเอาท์พุตสามารถควบคุมวิธีที่ webpack เขียนไฟล์ที่คอมไพล์ลงในฮาร์ดดิสก์ โปรดทราบว่าแม้ว่าจะมี จุดเข้าได้หลายจุด แต่มีการระบุ การกำหนดค่าเอาต์พุตเพียงรายการเดียว เท่านั้น
ขั้นแรกเราเริ่มต้นโปรเจ็กต์ npm init ติดตั้ง webpack และ webpack-cli ในเครื่อง จากนั้นสร้างโฟลเดอร์ index.html , webpack.config.js และ src ในไดเร็กทอรีราก และสร้าง main.js ในโฟลเดอร์เป็นไฟล์รายการ
หลังจากงานเตรียมการเสร็จสิ้นจะเป็นดังภาพ
main.js
ส่วนประกอบ () {
var div=document.createElement('div')
div.innerHTML="มาเรียนรู้การกำหนดค่าการส่งออกด้วยกัน~"
ส่งคืน div
-
document.body.appendChild(ส่วนประกอบ()) index.html
<body>
<script src="./dist/bundle.js"></script>
</body> packag.json
"สคริปต์": {
"test": "echo "ข้อผิดพลาด: ไม่ได้ระบุการทดสอบ" && ออก 1",
"build": "webpack" //Add } จากนั้นส่วนการกำหนดค่า webpack.config.js
การกำหนดค่าตัวเลือก output สามารถควบคุมวิธีที่ webpack เขียนไฟล์ที่คอมไพล์ลงในฮาร์ดดิสก์
โปรดทราบว่าแม้ว่าจะมีจุด入口หลายจุด แต่การกำหนดค่า输出เดียวเท่านั้นที่ถูกระบุ
ต่อไปนี้เป็นแนวคิดหลายประการของการกำหนดค่าเอาต์พุต:
1.
เส้นทางพาธระบุตำแหน่งของเอาต์พุตทรัพยากร และค่าที่ต้องการจะต้องเป็นเส้นทางสัมบูรณ์ เช่น :
const path=require(' เส้นทาง')
โมดูล.ส่งออก={
รายการ:'./src/main.js',
เอาท์พุท:{
ชื่อไฟล์:'bundle.js',
//ตั้งค่าตำแหน่งเอาต์พุตทรัพยากรเป็นเส้นทางไดเรกทอรี dist ของโครงการ: path.resolve(__dirname, 'dist')
-
} หลังจาก Webpack 4 แล้ว output.path ได้ตั้งค่าเริ่มต้นเป็นไดเร็กทอรี dist เว้นแต่เราจำเป็นต้องเปลี่ยนแปลง ไม่จำเป็นต้องกำหนดค่าแยกต่างหาก ดังนั้นหากเป็น webpack4 หรือสูงกว่า คุณสามารถเขียน:
module.exports={
รายการ:'./src/main.js',
เอาท์พุท:{
ชื่อไฟล์:'bundle.js',
-
} 2. ชื่อไฟล์ ฟัง
ก์ชั่นของชื่อไฟล์คือ การควบคุมชื่อไฟล์ของทรัพยากรเอาต์พุต ซึ่งอยู่ในรูปแบบของสตริง ในที่นี้ฉันตั้งชื่อมันว่า bundle.js ซึ่งหมายความว่าฉันต้องการให้ทรัพยากรถูกส่งออกในไฟล์ชื่อ Bundle.js:
module.exports={
รายการ:'./src/main.js',
เอาท์พุท:{
ชื่อไฟล์:'bundle.js',
-
} หลังจากทำแพ็กเกจแล้ว ดังแสดงในรูป โฟลเดอร์ dist จะถูกสร้างขึ้นโดยอัตโนมัติโดยมีไฟล์ bundle.js อยู่ในนั้น
ชื่อไฟล์สามารถเป็นได้ไม่เพียงแต่ชื่อของบันเดิลเท่านั้น แต่ยังเป็นพาธแบบสัมพันธ์ด้วย
ไม่สำคัญว่าไดเร็กทอรีในพาธจะไม่มีอยู่จริง Webpack จะสร้างไดเร็กทอรีเมื่อส่งออกทรัพยากร เช่น:
module.exports = {
เอาท์พุท: {
ชื่อไฟล์: './js/bundle.js',
-
}; ดังแสดงในภาพหลังบรรจุภัณฑ์:
ในสถานการณ์ที่มีหลายรายการ เราจำเป็นต้องระบุชื่อที่แตกต่างกันสำหรับแต่ละบันเดิลที่สร้างขึ้น Webpack รองรับการใช้แบบฟอร์มที่เหมือนภาษาเทมเพลตเพื่อสร้างชื่อไฟล์แบบไดนามิก
ก่อนหน้านั้น เราสร้างไฟล์รายการใหม่ใน src
:
ฟังก์ชั่นส่วนประกอบ () {
var div=document.createElement('div')
div.innerHTML="ฉันเป็นไฟล์รายการที่สอง"
ส่งคืน div
-
document.body.appendChild (ส่วนประกอบ ()) webpack.config.js:
module.exports = {
รายการ:{
หลัก:'./src/main.js',
ผู้จำหน่าย:'./src/vender.js'
-
เอาท์พุท: {
ชื่อไฟล์: '[ชื่อ].js',
-
}; ดังแสดงในภาพหลังบรรจุภัณฑ์:
[name] ในชื่อไฟล์จะถูกแทนที่ด้วยชื่อกลุ่ม ได้แก่ ชื่อหลักและผู้ขาย ดังนั้น vendor.js และ main.js จะถูกสร้างขึ้นในตอนท้าย
หากคุณต้องการดูเนื้อหา คุณต้องเปลี่ยนเนื้อหาใน index.html และจับคู่พาธกับบันเดิลแพ็กเกจสุดท้าย
<body>
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [คำถาม] จะมีความจำเป็นในเวลานี้ เราจะทำให้
index.htmlเพิ่มบันเดิลที่สร้างลงใน html ให้เราโดยอัตโนมัติได้อย่างไร สามารถใช้ปลั๊กอิน HtmlWebpackPlugin ได้ที่นี่ สำหรับรายละเอียดด้านล่าง
3.
นอกจาก [name] ซึ่งสามารถอ้างถึงชื่อ chunk แล้ว ยังมีตัวแปรเทมเพลตอื่นๆ อีกหลายตัวที่สามารถใช้ในการกำหนดค่าชื่อไฟล์ได้:
พวกเขาสามารถ: ควบคุมแคชไคลเอนต์
[hash] และ [chunkhash] เกี่ยวข้องโดยตรงกับเนื้อหากลุ่ม หากใช้ในชื่อไฟล์ เมื่อเนื้อหากลุ่มเปลี่ยนแปลง ก็อาจทำให้ชื่อไฟล์ทรัพยากรเปลี่ยนแปลงได้เช่นกัน ว่าผู้ใช้จะดาวน์โหลดเวอร์ชันใหม่ทันทีในครั้งถัดไปที่เขาร้องขอไฟล์ทรัพยากรโดยไม่ต้องใช้แคชในเครื่อง
[query] ก็สามารถให้เอฟเฟกต์ที่คล้ายกันได้ แต่ไม่เกี่ยวข้องกับเนื้อหาที่เป็นก้อน และนักพัฒนาจะต้องระบุด้วยตนเอง
4. publicPath
publicPath เป็นรายการการกำหนดค่าที่สำคัญมาก ซึ่งใช้ในการระบุตำแหน่งคำขอของทรัพยากร
ถ่ายภาพเป็น
ตัวอย่าง
ส่วนประกอบฟังก์ชัน () {
-
var img = รูปภาพใหม่ ();
myyebo.src = Img // URL คำขอ
-
} {
-
แบบสอบถาม: {
ชื่อ: '[ชื่อ].[ต่อ]',
เส้นทางขาออก: 'static/img/',
เส้นทางสาธารณะ: './dist/static/img/'
-
} ดังที่แสดงในตัวอย่างข้างต้น ที่อยู่คำขอรูปภาพต้นฉบับคือ ./img.jpg แต่หลังจากเพิ่ม publicPath ให้กับการกำหนดค่า พาธจริงจะกลายเป็น ./dist/static/img/img.jpg ดังนั้นจึงสามารถรับรูปภาพได้จาก publicPath
มี 3 รูปแบบ:
เกี่ยวข้องกับ HTML
เราสามารถระบุ publicPath เป็นเส้นทางสัมพันธ์ของ HTML ได้ เมื่อร้องขอทรัพยากรเหล่านี้ เส้นทางของ HTML ของหน้าปัจจุบันจะถูกเพิ่มไปยังเส้นทางสัมพันธ์เพื่อสร้าง URL ที่แท้จริง
//สมมติว่าที่อยู่ html ปัจจุบันคือ: https://www.example.com/app/index.html //ทรัพยากรที่โหลดแบบอะซิงโครนัสมีชื่อว่า 1.chunk.js เส้นทางสาธารณะ:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
Host related
หากค่าของ publicPath ขึ้นต้นด้วย "/" หมายความว่า publicPath ที่ คราวนี้เริ่มต้นด้วย The host name of the current page is the base path
// สมมติว่าที่อยู่ html ปัจจุบันคือ: https://www.example.com/app/index.html //ทรัพยากรที่โหลดแบบอะซิงโครนัสมีชื่อว่า 1.chunk.js เส้นทางสาธารณะ:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
เกี่ยวข้องกับ CDN
สองเส้นทางข้างต้นเป็นเส้นทางสัมพัทธ์ เรายังสามารถใช้เส้นทางสัมบูรณ์เพื่อกำหนดค่า publicPath
นี้ สถานการณ์โดยทั่วไปเกิดขึ้นเมื่อวางทรัพยากรแบบคงที่บน CDN เนื่องจากชื่อโดเมนไม่สอดคล้องกับชื่อโดเมนของเพจปัจจุบัน จึงจำเป็นต้องระบุในรูปแบบของเส้นทางสัมบูรณ์
เมื่อ publicPath เริ่มต้นในรูปแบบของส่วนหัวของโปรโตคอลหรือแบบสัมพันธ์ โปรโตคอล หมายความว่าเส้นทางปัจจุบันเกี่ยวข้องกับ CDN
/ /สมมติว่าที่อยู่ html ปัจจุบันคือ: https://www.example.com/app/index.html //ทรัพยากรที่โหลดแบบอะซิงโครนัสมีชื่อว่า 1.chunk.js เส้นทางสาธารณะ:"http://cdn.com/" //-->http://cdn.com/1.chunk.js เส้นทางสาธารณะ:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. ทางเข้าเดียว
ข้อกำหนดขั้นต่ำสำหรับการกำหนดค่าแอตทริบิวต์ output ใน webpack คือการตั้งค่าให้กับออบเจ็กต์ รวมถึงสองจุดต่อไปนี้:
filename คือชื่อไฟล์ของไฟล์เอาต์พุตpath ไดเร็กทอรีเอาต์พุตเป้าหมายmodule.exports={
รายการ:'./src/main.js',
เอาท์พุท:{
ชื่อไฟล์:'bundle.js',
-
-
//หลังจาก webpack 4 dist จะถูกสร้างขึ้นตามค่าเริ่มต้น ดังนั้นจึงละเว้นพาธที่นี่ 2.
หากการกำหนดค่าสร้าง "chunks" หลายรายการแยกกัน คุณควรใช้ตัวยึดตำแหน่งเพื่อให้แน่ใจว่าแต่ละไฟล์มีชื่อที่ไม่ซ้ำ
กัน ถูกใช้ที่นี่ [name] ของชื่อไฟล์ที่กล่าวถึง
นอกจากนี้ หากคุณต้องการใส่ทรัพยากรเหล่านี้ลงในโฟลเดอร์ที่ระบุ คุณสามารถเพิ่มการกำหนด path
module.exports={
รายการ: {
หลัก: './src/main.js',
ผู้จำหน่าย: './src/vender.js'
-
เอาท์พุท: {
ชื่อไฟล์: '[ชื่อ].js',
เส้นทาง: __dirname + '/dist/assets' //ระบุว่าชุดแพ็กเกจถูกวางไว้ในไดเร็กทอรี /dist/assets}
-
// สร้างหลังจากการบรรจุภัณฑ์: ./dist/assets/main.js, ./dist/assets/vender.js ปัญหาที่เหลืออยู่ข้างต้นในบทนี้สามารถแก้ไขได้โดยใช้ปลั๊กอิน HtmlWebpackPlugin
ติดตั้งปลั๊กอิน
npm install --save-dev html-webpack-plugin
กำหนดค่าปลั๊กอิน
const HtmlWebpackPlugin=require('html-webpack-plugin') //Load module module.exports = {
รายการ:{
หลัก:'./src/main.js',
ผู้จำหน่าย:'./src/vender.js'
-
//เพิ่มปลั๊กอินปลั๊กอิน:[
ใหม่ HtmlWebpackPlugin({
หัวเรื่อง: 'การจัดการผลผลิต'
-
-
เอาท์พุท: {
ชื่อไฟล์: '[ชื่อ].js',
-
}; หลังจากที่ บรรจุภัณฑ์
เสร็จสมบูรณ์ คุณจะพบว่า index.html ใหม่ปรากฏขึ้นใน dist ซึ่งจะเพิ่มทรัพยากรที่สร้างขึ้นให้เราโดยอัตโนมัติ หลังจากเปิด คุณจะพบว่าเบราว์เซอร์จะแสดงเนื้อหา
ซึ่งหมายความว่าคุณไม่จำเป็นต้องเขียน index.html เมื่อเริ่มต้นโครงการในอนาคต
สามารถรับซอร์สโค้ดได้ที่นี่:
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/ ไฟล์