เริ่มต้นกับ 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 เปรียบเทียบกับเครื่องมือสร้างอื่น ๆ อย่างไร, ฉันแนะนำคุณสองบทความ:

1. แอนดรูเรย์ Webpack: ควรใช้เมื่อใดและเพราะอะไร ในบล็อกของเขาเอง
2. คอรีเฮาส์ Browserify vs Webpack บน freeCodeCamp (มีภาพประกอบประกอบที่ยอดเยี่ยม)

ภาพประกอบสองภาพด้านบนมาจาก วัสดุ Webpack ของคู่มือ Pro React, แหล่งข้อมูลอื่นที่คุ้มค่ากับการดู.

แนวคิดหลักที่สี่ของ Webpack

Webpack มี สี่ตัวเลือกการกำหนดค่าหลักที่เรียกว่า “แนวคิดหลัก” ที่คุณจะต้องกำหนดในกระบวนการพัฒนา:

1. การเข้า - จุดเริ่ม ของกราฟการพึ่งพา (ไฟล์ JavaScript หนึ่งไฟล์ขึ้นไป).
2. เอาท์พุต - ไฟล์ที่คุณต้องการ เอาท์พุทที่จะรวม (ไฟล์ JavaScript หนึ่งไฟล์).
3. รถตักล้อยาง - การแปลงสินทรัพย์ เปลี่ยนเป็นโมดูล Webpack เพื่อให้พวกเขาสามารถ เพิ่มไปยังกราฟการพึ่งพา. ตัวอย่างเช่น, CSS-loader ใช้สำหรับการนำเข้าไฟล์ CSS.
4. ปลั๊กอิน - การกระทำที่กำหนดเองและฟังก์ชั่น ดำเนินการกับกลุ่ม. ตัวอย่างเช่น 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 ของเรา.