Clean Webpack Plugin: Behåll en ren byggnad

"CleanWebpackPlugin" är ett populärt plugin Webpack som hjälper dig att hantera din build-output genom att rensa upp de angivna katalogerna innan du genererar nya filer. Detta kan vara användbart för att förhindra att gamla eller onödiga filer samlas i din byggkatalog. Här är en kort förklaring av hur du använder CleanWebpackPlugin:

Installation

Se först till att du har Webpack och webpack-cli installerat i ditt projekt, som visas i de tidigare förklaringarna. Installera sedan CleanWebpackPlugin:

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

Konfiguration

Öppna din webpack.config.js fil och importera plugin:

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

Inne i plugins arrayen, instansiera CleanWebpackPlugin:

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

Som standard kommer plugin-programmet att rensa de output.path definierade i din Webpack konfiguration.

Anpassad konfiguration

Du kan anpassa beteendet CleanWebpackPlugin genom att skicka alternativ till dess konstruktor. Till exempel:

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

I det här exemplet kommer alla filer och kataloger att rengöras utom importantFile.txt.

Löpning Webpack

När du kör Webpack för att bygga ditt projekt CleanWebpackPlugin kommer den automatiskt att rensa de angivna katalogerna innan nya byggfiler genereras.

Kom ihåg att se den officiella dokumentationen clean-webpack-plugin för mer avancerade konfigurationer och alternativ. Denna plugin kan i hög grad hjälpa till att upprätthålla en ren katalog för utdata och undvika onödig röran.