Clean Webpack Plugin: รักษาโครงสร้างที่สะอาด

"CleanWebpackPlugin" เป็นปลั๊กอินยอดนิยมที่ Webpack ช่วยให้คุณจัดการเอาต์พุตบิลด์ของคุณโดยการล้างไดเร็กทอรีที่ระบุก่อนที่จะสร้างไฟล์ใหม่ สิ่งนี้มีประโยชน์ในการป้องกันไม่ให้ไฟล์เก่าหรือไฟล์ที่ไม่จำเป็นสะสมอยู่ในไดเร็กทอรีบิลด์ของคุณ นี่คือคำอธิบายสั้น ๆ เกี่ยวกับวิธีใช้ CleanWebpackPlugin:

การติดตั้ง

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณมี Webpack และ webpack-cli ติดตั้งในโครงการของคุณตามที่แสดงในคำอธิบายก่อนหน้านี้ จากนั้นติดตั้ง CleanWebpackPlugin:

npm install clean-webpack-plugin --save-dev

การกำหนดค่า

เปิด webpack.config.js ไฟล์ของคุณและนำเข้าปลั๊กอิน:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

ภายใน plugins อาร์เรย์ ให้ยกตัวอย่าง CleanWebpackPlugin:

module.exports = {  
  // ...other configuration options  
  
  plugins: [  
    new CleanWebpackPlugin()  
    // ...other plugins  
  ]  
};  

ตามค่าเริ่มต้น ปลั๊กอินจะล้างข้อมูล output.path ที่กำหนดไว้ใน Webpack การกำหนดค่า ของคุณ

การกำหนดค่าที่กำหนดเอง

คุณสามารถปรับแต่งลักษณะการทำงานของการ CleanWebpackPlugin โดยผ่านตัวเลือกไปยังตัวสร้างได้ ตัวอย่างเช่น:

new CleanWebpackPlugin({  
  cleanOnceBeforeBuildPatterns: ['**/*', '!importantFile.txt']  
})  

ในตัวอย่างนี้ ไฟล์และไดเร็กทอรีทั้งหมดจะถูกล้าง ยกเว้น importantFile.txt.

วิ่ง Webpack

เมื่อคุณรัน Webpack เพื่อสร้างโปรเจ็กต์ โปรแกรม CleanWebpackPlugin จะล้างไดเร็กทอรีที่ระบุโดยอัตโนมัติก่อนที่จะสร้างไฟล์บิลด์ใหม่

อย่าลืมอ้างอิงเอกสารอย่างเป็นทางการ clean-webpack-plugin สำหรับการกำหนดค่าและตัวเลือกขั้นสูงเพิ่มเติม ปลั๊กอินนี้สามารถช่วยรักษาไดเร็กทอรีเอาต์พุตของบิลด์ที่สะอาดและหลีกเลี่ยงความยุ่งเหยิงที่ไม่จำเป็นได้อย่างมาก