webpack --watchを実行するとビルドディレクトリから古いファイルを削除するには？

Question

webpack.config.jsがソースファイルを監視するように設定され、出力ファイルにハッシュが含まれていると、ビルドが正常に完了するたびに、完全に新しいビルドファイルセットが存在します。これはすばやくビルドディレクトリをいっぱいにします！

webpack各ビルドで古いファイルを削除するにはどうすればよいですか？

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

---

私はメモリ内に構築するためにwebpack-dev-serverを使用することができますが、それは私の現在のビルドプロセスに適合しない認識しています。

Answer 1

clean-webpack-plugin、webpack-shell-pluginは、ビルド後だけでなく、Webpackプロセス全体の前または後に実行されるため、これらの要件を満たすこともできません。

ただし、on-build-webpackプラグインを使用すると、ビルドが完了した時点で任意の機能を実行できます。この関数では、作成されたばかりではないビルドディレクトリ内のすべてのファイルのリンクを解除します。 assetsオブジェクトは関数に渡され、今作成された一連のアセットがあります。

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); 
     } 
    }); 

}) 

Answer 2

私はノードで実行するbuild.jsファイルを持っています。このファイルでは、webpackの設定をwebpack.config.jsからインポートします。すべての設定を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') 
})