เรามาพูดถึงวิธีบีบอัดและจัดแพ็คเกจทรัพยากร html ใน webpack กันดีกว่า

ทำไมคุณต้องจัดแพ็คเกจทรัพยากร html

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

ประโยชน์ของการใช้ webpack เพื่อจัดทำแพ็กเกจ html คือ:

(1) ไฟล์ js ที่ทำแพ็กเกจสามารถนำเข้าสู่ html ได้โดยอัตโนมัติ

(2) หลังจากที่ทำแพ็กเกจ html แล้ว มันจะยังคงถูกสร้างขึ้นในโฟลเดอร์ build และรวมเข้ากับไฟล์ js ที่ทำแพ็กเกจแล้ว เพื่อว่าเมื่อเราออนไลน์ คุณจะต้องคัดลอกโฟลเดอร์ที่สร้างโดยแพ็คเกจไปยังสภาพแวดล้อมออนไลน์

(3) มันจะช่วยให้เราบีบอัดไฟล์ html

วิธีบีบอัดและจัดทำแพ็คเกจทรัพยากร html ใน webpack

1. ติดตั้งปลั๊กอิน

Webpack สามารถเข้าใจได้เฉพาะไฟล์ JS และ JSON และต้องรองรับไฟล์อื่น ๆ ทุกประเภทจำเป็นต้องติดตั้งปลั๊กอินหรือตัวโหลดที่เกี่ยวข้อง

หากเราต้องการจัดแพ็คเกจไฟล์ HTML ก่อนอื่นเราต้องติดตั้งปลั๊กอิน html-webpack-plugin :

npm ติดตั้ง html-webpack-plugin -D

บทบาทของปลั๊กอินนี้:

• สร้างไฟล์ html ภายใต้การส่งออกตามค่าเริ่มต้น จากนั้นนำเข้าทรัพยากร JS/CSS ทั้งหมด

• เรายังระบุไฟล์ html ด้วยตนเองและเพิ่มทรัพยากรลงในไฟล์ html นี้ได้

2.

หลังจากติดตั้งปลั๊กอิน html-webpack-plugin กำหนดค่าในไฟล์ webpack.config.js :

// ...
 // 1. แนะนำปลั๊กอิน const HtmlWebpackPlugin = need('html-webpack-plugin');
 
 โมดูล.ส่งออก = {
   -
   // 2. กำหนดค่าปลั๊กอินปลั๊กอินในปลั๊กอิน: [
     ใหม่ HtmlWebpackPlugin({
       template: 'index.html', // ระบุไฟล์เทมเพลตรายการ (สัมพันธ์กับไดเร็กทอรีรากของโปรเจ็กต์)
       ชื่อไฟล์: 'index.html', // ระบุชื่อไฟล์เอาต์พุตและที่ตั้ง (สัมพันธ์กับไดเร็กทอรีเอาต์พุต)
       // สำหรับรายการการกำหนดค่าอื่นๆ ของปลั๊กอิน คุณสามารถดูเอกสารอย่างเป็นทางการของปลั๊กอินได้})
   -
 }

ลิงก์การกำหนดค่าโดยละเอียด: https://www.npmjs.com/package/html-webpack-plugin

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

3. เมื่อกำหนดค่ารายการ JS หลายรายการและสถานการณ์ HTML หลาย

ไฟล์ จำเป็นต้องรวบรวมไฟล์ HTML หลายไฟล์ และไฟล์จำเป็นต้องนำเข้าไฟล์ JS ที่แตกต่างกัน อย่างไรก็ตาม ตามค่าเริ่มต้น ไฟล์ HTML ที่จัดทำแพ็กเกจจะนำเข้าไฟล์ JS ที่ chunk ทำแพ็กเกจทั้งหมดได้ ระบุเพื่อแจกจ่าย JS

เส้นทาง const = ต้องการ ('เส้นทาง');
 // 1. แนะนำปลั๊กอิน const HtmlWebpackPlugin = need('html-webpack-plugin');
 โมดูล.ส่งออก = {
   -
   // 2. กำหนดค่ารายการ JS (หลายรายการ)
   รายการ: {
     ผู้ขาย: ['./src/jquery.min.js', './src/js/common.js'],
     ดัชนี: './src/index.js',
     รถเข็น: './src/js/cart.js'
   -
   //กำหนดค่าการส่งออก: {
     ชื่อไฟล์: '[ชื่อ].js',
     เส้นทาง: path.resolve(__dirname, 'build/js')
   -
   // 3. กำหนดค่าปลั๊กอิน: [
     ใหม่ HtmlWebpackPugin({
       แม่แบบ: 'index.html',
       ชื่อไฟล์: 'index.html',
       // ใช้ chunk เพื่อระบุไฟล์ JS ที่จะนำเข้า chunk: ['index', 'vendor']
     -
     // จำนวน HTML ที่ต้องคอมไพล์, จำนวนปลั๊กอินใหม่ที่จำเป็น new HtmlWebpackPlugin({
       แม่แบบ: './src/cart.html',
       ชื่อไฟล์: 'cart.html',
       ชิ้น: ['รถเข็น', 'ผู้ขาย']
     -
   -
 }

เคล็ดลับ: สิ่งที่ต้องสังเกตที่นี่คือจำนวนไฟล์ HTML ที่คุณต้องคอมไพล์ และกี่ครั้งที่คุณต้องใช้ HtmlWebpackPlugin ใหม่

หลังจากคอมไพล์การกำหนดค่าข้างต้นสำเร็จแล้ว ผลลัพธ์จะเป็นดังนี้:

build
 |__ index.html #แนะนำ index.js และ vendor.js
 |__ cart.html #แนะนำcart.js และ vendor.js
 |__ เจส
      |__ vendor.js # สร้างโดย jquery.min.js และ common.js |__ index.js # สร้างโดย index.js |__ cart.js # สร้างโดย cart.js สำหรับ

ทรัพยากร html ที่ถูกบีบอัดและแพ็กเกจ ตัวอย่างที่

1, webpack การกำหนดค่า config.js

const HTMLWebpackPlugin = need('html-webpack-plugin')
-
 ปลั๊กอิน: [
    // html-webpack-plugin การกำหนดค่าบรรจุภัณฑ์ html ปลั๊กอินนี้จะสร้างไฟล์ HTML5 สำหรับคุณ HTMLWebpackPlugin ใหม่ ({
      เทมเพลต: "./index.html", // เส้นทางสัมพัทธ์หรือสัมบูรณ์ที่แพ็กเกจไปยังเทมเพลต (เป้าหมายการทำแพ็กเกจ)
      title: 'Home', // ชื่อที่ใช้สำหรับแฮชเอกสาร HTML ที่สร้างขึ้น: true, //true ต่อท้ายแฮชการคอมไพล์ webpack ที่ไม่ซ้ำใครกับสคริปต์และไฟล์ CSS ที่รวมไว้ทั้งหมด ส่วนใหญ่ใช้เพื่อล้างแคช
      ย่อขนาด: { // บีบอัด html
        ยุบWhitespace: จริง // ยุบช่องว่าง KeepClosingSlash: จริง // เก็บช่องว่างที่ปิดไว้ RemoveComments: จริง // ลบความคิดเห็น RemoveRedundantAttributes: จริง // ลบแอตทริบิวต์ที่ซ้ำซ้อน RemoveScriptTypeAttributes: จริง // ลบสคริปต์ แอตทริบิวต์ประเภทสคริปต์ RemoveStyleLinkTypeAttributes: จริง // ลบแอตทริบิวต์ประเภทลิงก์สไตล์ useShortDoctype: true, // ใช้ประเภทเอกสารสั้น ๆ รักษาLineBreaks: true, // รักษาตัวแบ่งบรรทัด miniifyCSS: true, // บีบอัด css ในข้อความ
        minifyJS: true, // บีบอัด js ในข้อความ
      -
    -
  -
...

2. ในขณะนี้ของเรา index.html

<!DOCTYPE html>
<html lang="">
  <หัว>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  </หัว>
  <ร่างกาย>
    <div id="แอป">
      การกำหนดค่าบรรจุภัณฑ์ html</div>
  </ร่างกาย>
</html>

3. ในขณะนี้ index.js ของเรา

นำเข้า './../css/index.less'

ฟังก์ชั่นเพิ่ม(x,y) {
 กลับ x+y
-
console.log(add(2,3));

3. พิมพ์แพ็กเกจในคอนโซล webpack และพบว่าไฟล์เอาต์พุตแพ็กเกจมี index.html เพิ่มเติม โดยมีเนื้อหาดังนี้

<!DOCTYPE html>
<html lang="">
  <หัว>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  <script เลื่อน src="index.js"></script></head>
  <ร่างกาย>
    <div id="แอป">
      การกำหนดค่าบรรจุภัณฑ์ html</div>
  </ร่างกาย>
</html>

<script defer="" src="index.js"></script> จะถูกนำมาใช้โดยอัตโนมัติใน

เบราว์เซอร์เพื่อเปิดการส่งออกที่บรรจุดัชนี พบว่ารูปแบบที่มีผลกระทบและการควบคุม หน่วยยังส่งออกตามปกติ: