वेबपैक - वॉच करते समय बिल्ड डीआईआर से पुरानी फाइलों को कैसे हटाएं?

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 इन आवश्यकताओं को पूरा करने में सक्षम है क्योंकि यह केवल पूरे वेबपैक प्रक्रिया से पहले या बाद में चलता है, न कि निर्माण के बाद।

हालांकि 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.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') 
})