เริ่มต้นกับ Webpack [ด้วยโครงการตัวอย่าง]
Webpack คือ โมดูลบันเดิล ที่อำนวยความสะดวกในการสร้างแอปพลิเคชัน JavaScript ที่ซับซ้อน มันได้รับแรงฉุดอย่างจริงจังเนื่องจากชุมชน React เลือกเป็นเครื่องมือสร้างหลัก Webpack คือ ไม่ได้เป็นผู้จัดการแพ็คเกจหรือนักวิ่ง ในขณะที่ใช้วิธีการ (ขั้นสูงมากกว่า) ที่แตกต่างกัน แต่เป้าหมายของมันก็คือ ตั้งค่ากระบวนการสร้างแบบไดนามิก.
Webpack ทำงานร่วมกับ JavaScript วานิลลา คุณสามารถใช้มันเพื่อ รวมสินทรัพย์สแตติกของแอปพลิเคชัน, เช่นรูปภาพแบบอักษรสไตล์ชีทสคริปต์เป็นไฟล์เดียวในขณะที่ ดูแลการพึ่งพาทั้งหมด.
คุณไม่จำเป็นต้องใช้ Webpack ในการสร้างแอพหรือเว็บไซต์อย่างง่ายตัวอย่างเช่นแอปที่มี JavaScript เพียงไฟล์เดียวและไฟล์ CSS หนึ่งไฟล์และรูปภาพไม่กี่รูปอย่างไรก็ตามมันสามารถช่วยชีวิตผู้ใช้งานได้ แอปพลิเคชันที่ซับซ้อนมากขึ้นด้วยสินทรัพย์และการอ้างอิงหลายอย่าง.
Webpack เทียบกับนักวิ่งงานกับ Browserify
ดังนั้น Webpack จะจัดการได้อย่างไร เปรียบเทียบกับเครื่องมือสร้างอื่น ๆ เช่น Grunt, Gulp หรือ Browserify?
Grunt และ Gulp เป็นนักวิ่งภารกิจ ในไฟล์ปรับแต่งคุณ ระบุงาน, และผู้ดำเนินการงานจะเรียกใช้งาน เวิร์กโฟลว์ของนักวิ่งงาน โดยทั่วไปมีลักษณะเช่นนี้:
อย่างไรก็ตาม Webpack เป็น โมดูลบันเดิล ที่วิเคราะห์โครงการทั้งหมด, ตั้งค่าต้นไม้พึ่งพา, และ สร้างไฟล์ JavaScript ที่บันเดิล มันทำหน้าที่กับเบราว์เซอร์.
Browserify นั้นใกล้กับ Webpack มากกว่านักวิ่งที่ใช้งาน สร้างกราฟการพึ่งพา แต่มันทำอย่างนั้นเท่านั้น สำหรับโมดูล JavaScript. Webpack ก้าวไปอีกขั้นหนึ่งและไม่เพียง แต่รวมซอร์สโค้ดเท่านั้น ยังสินทรัพย์อื่น ๆ เช่นรูปภาพสไตล์ชีตแบบอักษร ฯลฯ.
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Webpack เปรียบเทียบกับเครื่องมือสร้างอื่น ๆ อย่างไร, ฉันแนะนำคุณสองบทความ:
- แอนดรูเรย์ Webpack: ควรใช้เมื่อใดและเพราะอะไร ในบล็อกของเขาเอง
- คอรีเฮาส์ Browserify vs Webpack บน freeCodeCamp (มีภาพประกอบประกอบที่ยอดเยี่ยม)
ภาพประกอบสองภาพด้านบนมาจาก วัสดุ Webpack ของคู่มือ Pro React, แหล่งข้อมูลอื่นที่คุ้มค่ากับการดู.
แนวคิดหลักที่สี่ของ Webpack
Webpack มี สี่ตัวเลือกการกำหนดค่าหลักที่เรียกว่า “แนวคิดหลัก” ที่คุณจะต้องกำหนดในกระบวนการพัฒนา:
- การเข้า - จุดเริ่ม ของกราฟการพึ่งพา (ไฟล์ JavaScript หนึ่งไฟล์ขึ้นไป).
- เอาท์พุต - ไฟล์ที่คุณต้องการ เอาท์พุทที่จะรวม (ไฟล์ JavaScript หนึ่งไฟล์).
- รถตักล้อยาง - การแปลงสินทรัพย์ เปลี่ยนเป็นโมดูล Webpack เพื่อให้พวกเขาสามารถ เพิ่มไปยังกราฟการพึ่งพา. ตัวอย่างเช่น,
CSS-loader
ใช้สำหรับการนำเข้าไฟล์ CSS. - ปลั๊กอิน - การกระทำที่กำหนดเองและฟังก์ชั่น ดำเนินการกับกลุ่ม. ตัวอย่างเช่น
i18n-webpack ปลั๊กอิน
ฝังการแปลลงในบันเดิล.
Loaders ทำงานแบบต่อไฟล์ ก่อนการรวบรวมจะเกิดขึ้น. ปลั๊กอินจะดำเนินการกับรหัสที่รวมมา, ในตอนท้ายของกระบวนการรวบรวม.
ติดตั้ง Webpack
ไปยัง ติดตั้ง Webpack, เปิดบรรทัดคำสั่งนำทางไปยังโฟลเดอร์โครงการของคุณและเรียกใช้คำสั่งต่อไปนี้:
เริ่มต้น NPM
หากคุณไม่ต้องการทำการกำหนดค่าด้วยตัวเองคุณสามารถกำหนดเองได้ เติม package.json
ไฟล์ที่มีค่าเริ่มต้น ด้วยคำสั่งดังต่อไปนี้:
npm init -y
ถัดไปติดตั้ง Webpack:
npm ติดตั้ง webpack - บันทึก -dev
หากคุณใช้ค่าเริ่มต้นนี่คือสิ่งที่คุณต้องการ package.json
ไฟล์ควรมีลักษณะเหมือนตอนนี้ (คุณสมบัติสามารถอยู่ในลำดับที่แตกต่างกัน):
"name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," สคริปต์ ": " ทดสอบ ":" echo \ "ข้อผิดพลาด: ไม่ได้ระบุการทดสอบ \" && ออก 1 "," คำหลัก ": []," ผู้แต่ง ":" "," ใบอนุญาต ":" ISC "
สร้างไฟล์กำหนดค่า
คุณต้องสร้าง webpack.config.js
ไฟล์ ในโฟลเดอร์รูทของโครงการ. ไฟล์การกำหนดค่านี้มีบทบาทสำคัญเนื่องจากนี่คือที่ที่คุณจะ กำหนดแนวคิดสี่หลัก (จุดเริ่มต้น, เอาท์พุท, รถตัก, ปลั๊กอิน).
webpack.config.js
ไฟล์ เก็บวัตถุการกำหนดค่า คุณสมบัติที่คุณต้องการระบุ ในบทความนี้เราจะระบุคุณสมบัติสี่ประการที่ สอดคล้องกับแนวคิดหลักสี่ (การเข้า
, เอาท์พุต
, โมดูล
, และ เสียบเข้าไป
) แต่วัตถุปรับแต่งมีคุณสมบัติอื่นเช่นกัน.
1. สร้างจุดเริ่มต้น
คุณสามารถมี จุดเริ่มต้นอย่างน้อยหนึ่งจุด. คุณจำเป็นต้องกำหนดพวกเขาใน การเข้า
คุณสมบัติ.
แทรกข้อมูลโค้ดต่อไปนี้ลงใน webpack.config.js
ไฟล์. มัน ระบุจุดเข้าใช้งานหนึ่งจุด:
module.exports = รายการ: "./src/script.js";
เพื่อระบุจุดเข้าใช้มากกว่าหนึ่งจุดที่คุณสามารถใช้ได้ ทั้งอาร์เรย์หรือไวยากรณ์ของวัตถุ.
ในโฟลเดอร์โครงการของคุณ, สร้างใหม่ src
โฟลเดอร์ และ script.js
ไฟล์ข้างในนั้น. นี่จะเป็นของคุณ จุดเริ่มต้น. เพื่อวัตถุประสงค์ในการทดสอบเพียง วางสตริง ข้างใน ฉันใช้สิ่งต่อไปนี้ (แต่คุณสามารถใช้อันที่น่าสนใจมากกว่านี้ได้):
const ทักทาย = "สวัสดีฉันเป็นโครงการเริ่มต้นของ Webpack"; document.write (ทักทาย);
2. กำหนดผลลัพธ์
คุณสามารถมี ไฟล์เอาต์พุตหนึ่งไฟล์เท่านั้น. Webpack รวมเนื้อหาทั้งหมดไว้ในไฟล์นี้ คุณต้องกำหนดค่า เอาท์พุต
ด้วยวิธีต่อไปนี้:
const path = require ("path"); module.exports = รายการ: "./src/script.js", เอาต์พุต: filename: "bundle.js", เส้นทาง: path.resolve (__ dirname, 'dist');
ชื่อไฟล์
คุณสมบัติกำหนด ชื่อของไฟล์ที่บันเดิล, ในขณะที่ เส้นทาง
คุณสมบัติ ระบุชื่อของไดเรกทอรี. ตัวอย่างข้างต้นจะสร้าง /dist/bundle.js
ไฟล์.
ถึงแม้ว่ามันจะไม่บังคับ แต่ก็ดีกว่า ใช้ path.resolve ()
วิธี เมื่อคุณกำหนด เส้นทาง
สถานที่ให้บริการตามที่มัน รับประกันความแม่นยำของโมดูล (พา ธ สัมบูรณ์ของเอาต์พุตถูกสร้างขึ้นตามกฎที่แตกต่างกันในสภาพแวดล้อมที่แตกต่างกันความละเอียดของโมดูลจะช่วยแก้ไขความคลาดเคลื่อนนี้) ถ้าคุณใช้ path.resolve
, คุณต้องการ จำเป็นต้อง เส้นทาง
โมดูลโหนด ที่ด้านบนของ webpack.config.js
ไฟล์.
3. เพิ่มรถตัก
ไปยัง เพิ่มรถตัก, คุณจำเป็นต้องกำหนด โมดูล
คุณสมบัติ ด้านล่างเราเพิ่ม Babel-loader
ที่ช่วยให้คุณ ใช้ฟีเจอร์ ECMAScript 6 อย่างปลอดภัย ในไฟล์ JS ของคุณ:
const path = require ("path"); module.exports = รายการ: "./src/script.js", เอาต์พุต: filename: "bundle.js", เส้นทาง: path.resolve (__ dirname, 'dist'), โมดูล: กฎ: [ทดสอบ : /\.js$/, แยก: / (node_modules | bower_components) /, ใช้: loader: "babel-loader", ตัวเลือก: presets: ["env"];
การกำหนดค่าอาจดูยาก แต่เป็นเพียงการคัดลอกวาง เอกสารประกอบของ Babel loader. ตัวตักส่วนใหญ่มาพร้อมกับไฟล์ readme หรือเอกสารบางประเภทดังนั้นคุณสามารถ (เกือบ) รู้วิธีกำหนดค่าได้อย่างถูกต้อง และเอกสาร Webpack ยังมีหน้าที่อธิบาย วิธีการกำหนดค่า module.rules
.
คุณสามารถเพิ่ม รถตักมากเท่าที่คุณต้องการ, นี่คือรายการทั้งหมด โปรดทราบว่าคุณต้อง ติดตั้งตัวโหลดแต่ละตัวด้วย npm เพื่อให้ทำงานได้ สำหรับตัวโหลด Babel คุณจะต้องติดตั้งแพ็กเกจโหนดที่จำเป็นด้วย npm:
npm ติดตั้ง - บันทึก-dev babel-loader babel-core babel-preset-env webpack
หากคุณมีลักษณะที่ package.json
ไฟล์คุณจะเห็นว่า npm เพิ่มแพ็คเกจที่เกี่ยวข้องกับ Babel สามชุดลงใน devDependencies
คุณสมบัติ, สิ่งเหล่านี้จะดูแลการคอมไพล์ ES6.
4. เพิ่มปลั๊กอิน
ไปยัง เพิ่มปลั๊กอิน, คุณต้องระบุ ปลั๊กอิน
คุณสมบัติ นอกจากนี้คุณยังต้อง จำเป็นต้อง ปลั๊กอินหนึ่งโดยหนึ่ง, เนื่องจากเป็นโมดูลภายนอก.
ในตัวอย่างของเราเราเพิ่มปลั๊กอิน Webpack สองอัน: ปลั๊กอิน HTML Webpack และ โหลดปลั๊กอิน Webpack ล่วงหน้า. Webpack มี ระบบนิเวศปลั๊กอินที่ดี, คุณสามารถเรียกดูรายการทั้งหมดได้ที่นี่.
หากต้องการให้ปลั๊กอินเป็นโมดูลโหนด, สร้างค่าคงที่ใหม่สองค่า: HtmlWebpackPlugin
และ PreloadWebpackPlugin
และ ใช้ จำเป็นต้อง()
ฟังก์ชัน.
const path = require ("path"); const HtmlWebpackPlugin = ต้องการ ("html-webpack-plugin"); const PreloadWebpackPlugin = ต้องการ ("preload-webpack-plugin"); module.exports = รายการ: "./src/script.js", เอาต์พุต: filename: "bundle.js", เส้นทาง: path.resolve (__ dirname, 'dist'), โมดูล: กฎ: [ทดสอบ : /\.js$/, แยก: / (node_modules | bower_components) /, ใช้: loader: "babel-loader", ตัวเลือก: presets: ["env"], ปลั๊กอิน: [new HtmlWebpackPlugin (), PreloadWebpackPlugin ใหม่ ()];
เช่นเดียวกับในกรณีของรถตักคุณยังต้อง ติดตั้งปลั๊กอิน Webpack ด้วย npm. ในการติดตั้งปลั๊กอินสองตัวในตัวอย่างให้เรียกใช้สองคำสั่งต่อไปนี้ในบรรทัดคำสั่งของคุณ:
npm install html-webpack-plugin --save-dev npm install --save-dev preload-webpack-plugin
ถ้าคุณตรวจสอบของคุณ package.json
ไฟล์ตอนนี้คุณจะเห็นว่า npm เพิ่มสองปลั๊กอินใน devDependencies
คุณสมบัติ.
เรียกใช้ Webpack
ไปยัง สร้างต้นไม้พึ่งพา และ เอาท์พุทมัด, เรียกใช้คำสั่งต่อไปนี้ในบรรทัดคำสั่ง:
webpack
มันมักจะ ใช้เวลาหนึ่งหรือสองนาที สำหรับ Webpack เพื่อสร้างโครงการ เมื่อเสร็จแล้วคุณจะเห็นข้อความที่คล้ายกันใน CLI ของคุณ:
หากทุกอย่างไปถูก Webpack สร้าง อ.
โฟลเดอร์ ในรากของโครงการของคุณและ วางไฟล์ที่รวมสองไฟล์ไว้bundle.js
และ index.html
) ข้างในมัน.
Github repo
หากคุณต้องการที่จะตรวจสอบดาวน์โหลดหรือแยกโครงการทั้งหมดได้ดูที่ repo Github ของเรา.