CleanWebpackPlugin

CleanWebpackPlugin (ang. Clean Webpack Plugin) jest popularnym wtyczką do Webpack – modułowego bundlera JavaScript używanego w nowoczesnym rozwoju aplikacji webowych. Jego głównym zadaniem jest automatyczne usuwanie (czyszczenie) katalogu wyjściowego (output) przed każdą kompilacją, co zapobiega pozostawaniu przestarzałych plików i minimalizuje ryzyko konfliktów przy generowaniu nowych zasobów.

Historia

Projekt clean-webpack-plugin został założony w 2017 roku przez Michele Ragghianti jako proste rozwiązanie problemu, który napotykali deweloperzy podczas pracy z Webpackiem w wersjach 3 i 4. Wcześniej w podobnych sytuacjach używano własnoręcznych skryptów Node.js lub poleceń rimraf, ale brakowało standaryzowanego i łatwo konfigurowalnego rozwiązania. Od pierwszej wersji v0.1.0 wtyczka była regularnie aktualizowana, a od Webpack 5 stała się domyślnym zalecanym sposobem zarządzania czystością katalogu dist.

Funkcjonalność

Usuwanie katalogu wyjściowego – domyślnie usuwa cały folder określony w output.path w konfiguracji Webpacka.
Wzorce wykluczeń – umożliwia definiowanie plików lub katalogów, które mają pozostać nienaruszone (np. statyczne zasoby).
Wsparcie dla Node.js API – wykorzystuje natywne funkcje fs oraz fs.promises do asynchronicznego usuwania.
Kompatybilność z trybami development i production – można ustawić, aby czyszczenie odbywało się tylko w określonych środowiskach.
Integracja z npm i Yarn – wtyczka jest publikowana w rejestrze npm i może być instalowana poleceniem npm install --save-dev clean-webpack-plugin.

Podstawowe użycie

Poniżej przedstawiono typowy przykład konfiguracji Webpack z użyciem CleanWebpackPlugin:

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin({
      // domyślnie usuwa cały folder 'dist'
      dry: false,        // symulacja działania, przydatna w trybie testowym
      verbose: true,    // wyświetla szczegóły usuwanych plików
      cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*']
    })
  ],
  mode: 'production'
};

Opcje konfiguracyjne

Opcja	Opis	Domyślna wartość
`dry`	Jeśli `true`, wtyczka nie usuwa plików, a jedynie wyświetla, co zostałoby usunięte.	`false`
`verbose`	Włącza szczegółowe logowanie w konsoli.	`false`
`cleanStaleWebpackAssets`	Usuwa zasoby wygenerowane w poprzednich kompilacjach, które nie są już potrzebne.	`true`
`protectWebpackAssets`	Zapobiega usunięciu plików, które są jednocześnie wykorzystywane przez inne wtyczki (np. HtmlWebpackPlugin).	`true`
`cleanOnceBeforeBuildPatterns`	Tablica wzorców (globy) określających, które pliki mają być usunięte przed budowaniem.	`['*/']`

Zastosowanie w popularnych przepływach prac

W połączeniu z innymi narzędziami ekosystemu JavaScript, CleanWebpackPlugin odgrywa kluczową rolę w:

ciągłej integracji i wdrażaniu (CI/CD), zapewniając, że każdy build rozpoczyna się w czystym środowisku.
Optymalizacji rozmiaru pakietu – dzięki usuwaniu nieużywanych plików zmniejsza się ryzyko dołączania przestarzałych zasobów.
Współpracy z Babel i TypeScript, które generują dodatkowe pliki pośrednie.

Alternatywy i powiązane wtyczki

Choć CleanWebpackPlugin jest najczęściej wybieraną opcją, istnieją inne rozwiązania:

WebpackShellPlugin – umożliwia wykonanie dowolnych skryptów powłoki, w tym usuwania katalogów.
WebpackRemoveFilesPlugin – pozwala usuwać wybrane pliki po zakończeniu budowania.
Ręczne skrypty w npm (np. rimraf) definiowane w sekcji scripts pliku package.json.

Znaczenie w ekosystemie

Dzięki CleanWebpackPlugin deweloperzy mogą skupić się na logice aplikacji, a nie na utrzymaniu „śmieciowego” katalogu wyjściowego. Wtyczka przyczynia się do zwiększenia przejrzystości procesu budowania, zmniejszenia ryzyka konfliktów nazw plików oraz poprawy wydajności operacji Docker-owych kontenerów, które często kopiują jedynie zawartość docelowego folderu dist.