close

Clean Webpack Plugin: Giữ Cho Dự Án Sạch Sẽ

"CleanWebpackPlugin" là một plugin phổ biến cho Webpack giúp bạn quản lý đầu ra của quá trình build bằng cách dọn dẹp các thư mục được chỉ định trước khi tạo các tệp mới. Điều này có thể hữu ích để ngăn việc các tệp cũ hoặc không cần thiết tích luỹ trong thư mục build. Dưới đây là một giải thích ngắn về cách sử dụng CleanWebpackPlugin:

Cài đặt

Đầu tiên, đảm bảo bạn đã cài đặt Webpack và webpack-cli trong dự án của bạn, như đã được trình bày trong các phần trước. Sau đó, cài đặt CleanWebpackPlugin:

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

Cấu hình

Mở tệp webpack.config.js và nhập plugin:

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

Bên trong mảng plugins, tạo thể hiện của CleanWebpackPlugin:

module.exports = {
  // ...các tùy chọn cấu hình khác

  plugins: [
    new CleanWebpackPlugin()
    // ...các plugin khác
  ]
};

Mặc định, plugin sẽ dọn dẹp thư mục output.path đã được xác định trong cấu hình Webpack.

Cấu hình Tùy chỉnh

Bạn có thể tùy chỉnh hành vi của CleanWebpackPlugin bằng cách truyền các tùy chọn vào hàm tạo của nó. Ví dụ:

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

Trong ví dụ này, tất cả các tệp và thư mục sẽ được dọn dẹp, ngoại trừ importantFile.txt.

Chạy Webpack

Khi bạn chạy Webpack để build dự án, CleanWebpackPlugin sẽ tự động dọn dẹp các thư mục đã được chỉ định trước khi tạo các tệp build mới.

Hãy nhớ tham khảo tài liệu chính thức của clean-webpack-plugin để biết thêm về cấu hình và tùy chọn nâng cao. Plugin này có thể giúp duy trì một thư mục đầu ra build sạch sẽ và tránh làm rối mất thời gian không cần thiết.