Clean Webpack Plugin: Manter uma compilação limpa

O "CleanWebpackPlugin" é um plug-in popular Webpack que ajuda você a gerenciar sua saída de compilação limpando os diretórios especificados antes de gerar novos arquivos. Isso pode ser útil para evitar que arquivos antigos ou desnecessários se acumulem em seu diretório de compilação. Aqui está uma breve explicação de como usar o CleanWebpackPlugin:

Instalação

Primeiro, certifique-se de ter Webpack instalado webpack-cli em seu projeto, conforme mostrado nas explicações anteriores. Em seguida, instale o CleanWebpackPlugin:

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

Configuração

Abra seu webpack.config.js arquivo e importe o plugin:

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

Dentro da plugins matriz, instancie o CleanWebpackPlugin:

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

Por padrão, o plug-in limpará o output.path definido em sua Webpack configuração.

Configuração personalizada

Você pode personalizar o comportamento do CleanWebpackPlugin passando opções para seu construtor. Por exemplo:

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

Neste exemplo, todos os arquivos e diretórios serão limpos, exceto importantFile.txt.

Correndo Webpack

Quando você executa Webpack o build do seu projeto, ele CleanWebpackPlugin limpa automaticamente os diretórios especificados antes de gerar novos arquivos de build.

Lembre-se de consultar a documentação oficial clean-webpack-plugin para configurações e opções mais avançadas. Este plug-in pode ajudar muito a manter um diretório de saída de compilação limpo e evitar confusão desnecessária.