โฮมเพจ » การเข้ารหัส » เริ่มต้นกับ Webpack [ด้วยโครงการตัวอย่าง]

    เริ่มต้นกับ Webpack [ด้วยโครงการตัวอย่าง]

    Webpack คือ โมดูลบันเดิล ที่อำนวยความสะดวกในการสร้างแอปพลิเคชัน JavaScript ที่ซับซ้อน มันได้รับแรงฉุดอย่างจริงจังเนื่องจากชุมชน React เลือกเป็นเครื่องมือสร้างหลัก Webpack คือ ไม่ได้เป็นผู้จัดการแพ็คเกจหรือนักวิ่ง ในขณะที่ใช้วิธีการ (ขั้นสูงมากกว่า) ที่แตกต่างกัน แต่เป้าหมายของมันก็คือ ตั้งค่ากระบวนการสร้างแบบไดนามิก.

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

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

    Webpack เทียบกับนักวิ่งงานกับ Browserify

    ดังนั้น Webpack จะจัดการได้อย่างไร เปรียบเทียบกับเครื่องมือสร้างอื่น ๆ เช่น Grunt, Gulp หรือ Browserify?

    Grunt และ Gulp เป็นนักวิ่งภารกิจ ในไฟล์ปรับแต่งคุณ ระบุงาน, และผู้ดำเนินการงานจะเรียกใช้งาน เวิร์กโฟลว์ของนักวิ่งงาน โดยทั่วไปมีลักษณะเช่นนี้:

    ภาพ: pro-react.com

    อย่างไรก็ตาม Webpack เป็น โมดูลบันเดิล ที่วิเคราะห์โครงการทั้งหมด, ตั้งค่าต้นไม้พึ่งพา, และ สร้างไฟล์ JavaScript ที่บันเดิล มันทำหน้าที่กับเบราว์เซอร์.

    ภาพ: pro-react.com

    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 ของเรา.