Esegui comando dopo la creazione del Webpack

Question

Vorrei eseguire il webpack nella modalità --watch ed eseguire un comando di shell dopo ogni generazione che sincronizza una cartella con un'altra.

Ho trovato this plugin che attiva un evento dopo ogni generazione. Funziona, ma l'ultimo pezzo del puzzle è di attivare un comando shell (per la sincronizzazione) da Javascript. Ogni suggerimento su come ottenere questo risultato è molto apprezzato.

Answer 1

È possibile eseguire facilmente qualsiasi comando di shell con il modulo integrato child_process. Inoltre puoi provare alcune librerie di shell per node.js, come Shell.js. Avvolge la maggior parte delle shell di default per un utilizzo più conveniente

Answer 2

Avevo anche bisogno di una cosa del genere, quindi ho compilato un plugin super semplice per eseguire i comandi di shell prima e dopo ogni build.

'use strict'; 

var exec = require('child_process').exec; 

function puts(error, stdout, stderr) { 
    console.log(stdout); 
} 

function WebpackShellPlugin(options) { 
    var defaultOptions = { 
    onBuildStart: [], 
    onBuildEnd: [] 
    }; 

    this.options = Object.assign(defaultOptions, options); 
} 

WebpackShellPlugin.prototype.apply = function(compiler) { 
    const options = this.options; 

    compiler.plugin("compilation", compilation => { 
    if(options.onBuildStart.length){ 
     console.log("Executing pre-build scripts"); 
     options.onBuildStart.forEach(script => exec(script, puts)); 
    } 
    }); 

    compiler.plugin("emit", (compilation, callback) => { 
    if(options.onBuildEnd.length){ 
     console.log("Executing post-build scripts"); 
     options.onBuildEnd.forEach(script => exec(script, puts)); 
    } 
    callback(); 
    }); 
}; 

module.exports = WebpackShellPlugin; 

quindi nella configurazione webpack:

plugins: [ 
    new WebpackShellPlugin({ 
     onBuildStart: ['echo "hello world"'], 
     onBuildEnd: ['echo "goodbye world"'] 
    }) 
] 

Questo è super semplice, e non supportano gli script asincrone correttamente. ma funziona sentiti libero di modificare comunque come ritieni opportuno.

Considerare questo codice sotto licenza MIT.

Richiede il nodo 4.xe su per eseguire, poiché utilizzo alcune funzioni di es6 qui.

Answer 3

Se voi Guya voglio fare quando un file specifico viene modificato è possibile utilizzare questo piccolo plug-in ho costruito: https://www.npmjs.com/package/webpack-noodle-plugin

spero che possa aiutare