web-dev-qa-db-fra.com

Comment supprimer les anciens fichiers du répertoire de construction lorsque webpack --watch?

Quand mon webpack.config.js est configuré pour surveiller mes fichiers source et les fichiers de sortie contiennent un hachage, puis à chaque fois que la génération se termine avec succès, un ensemble entièrement nouveau de fichiers créés existe. Cela remplit rapidement le répertoire de construction avec de la cruauté!

Comment puis-je faire webpack supprimer les anciens fichiers de chaque build?

module.exports = {
  ...
  watch: true,
  output: {
    filename: '[name]-[hash:8].js'
  }
  ...
}

Je reconnais que je pourrais utiliser webpack-dev-server à construire en mémoire mais cela ne correspond pas à mon processus de construction actuel.

15
Chris W.

Ni clean-webpack-plugin, webpack-Shell-plugin est en mesure de répondre à ces exigences car il ne s'exécute qu'avant ou après l'intégralité du processus du webpack, et pas seulement après la génération.

Cependant, avec le on-build-webpack plugin vous pouvez exécuter une fonction arbitraire lorsque la construction est terminée. Dans cette fonction, dissociez tous les fichiers de votre répertoire de construction qui ne sont pas simplement créés. L'objet assets est passé dans la fonction et le jeu d'actifs vient d'être créé.

const fs = require('fs');
const WebpackOnBuildPlugin = require('on-build-webpack');

const buildDir = '...path/to/your/build-dir/';

module.exports = {

  watch: true,

  new WebpackOnBuildPlugin(function(stats) {
    const newlyCreatedAssets = stats.compilation.assets;

    const unlinked = [];
    fs.readdir(path.resolve(buildDir), (err, files) => {
      files.forEach(file => {
        if (!newlyCreatedAssets[file]) {
          fs.unlink(path.resolve(buildDir + file));
          unlinked.Push(file);
        }
      });
      if (unlinked.length > 0) {
        console.log('Removed old assets: ', unlinked);
      }
  });

})
23
Chris W.

J'ai un fichier build.js que j'exécute avec le nœud. Dans ce fichier, j'importe la configuration du webpack depuis le webpack.config.js. Je sauvegarde toute la configuration dans une variable appelée config.

require("shelljs/global");

var webpack = require('webpack');
var conf = require('./webpack.config.js');
var ora = require('ora');

var spinner = ora('chargement...');
spinner.start();
// I use the rm command that is provide by the module "shellsjs/global"
rm("-rf", "build");

webpack(conf, function(err, stats){
    spinner.stop();
    if(err) throw error
    process.stdout.write(stats.toString({
        color:true,
        modules:false,
        children:false,
        chunk: false,
        chunkModule:false
    }) + '\n')
})
1
Yves Kipondo