Webpack --watch olduğunda eski dosyaları derleme dizininden nasıl kaldırabilirsiniz?

Question

Benim webpack.config.js benim kaynak dosyalarımı izlemek için ayarlandığında ve çıktı dosyaları bir karma içerir, daha sonra her defasında yapı tamamlandığında yeni bir yerleşik dosyalar kümesini tamamlar. Bu, hızlı bir şekilde, kurulum direkini kiri ile doldurur!

Her yapıdaki eski dosyaları webpack nasıl silebilirim?

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

---

ben bellekte inşa etmek webpack-dev-server kullanabilirsiniz tanımak ama bu benim şimdiki inşa sürecini uymuyor.

Answer 1

Ne clean-webpack-plugin, webpack-shell-plugin bu gereksinimleri yerine getirebilir, çünkü yalnızca web kurgusunun tamamlanmasından önce veya sonra çalışır, yalnızca inşa işleminden sonra değil.

Ancak, on-build-webpack eklentisiyle, yapı tamamlandığında isteğe bağlı bir işlevi çalıştırabilirsiniz. Bu işlevde, oluşturulmamış dizindeki tüm dosyaların bağlantısını yeni oluşturulmamış. assets nesnesi işleve iletilir ve yeni oluşturulmuş varlık kümesine sahiptir.

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

Düğümle çalıştırdığım bir build.js dosyasına sahibim. Bu dosyada webpack yapılandırmasını webpack.config.js'dan aldım. Tüm yapılandırmayı config adlı bir değişkene kaydediyorum.

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