WebPack-Ausführungsfunktion vor dem Start von Build

Question

Ich muss eine JavaScript-Funktion ausführen, bevor das Webpack seinen Erstellungsprozess startet. Die Funktion benötigt nur .scss Dateien und verkettet sie zu einem.

Danach sollte Webpack die Ergebnisdatei übernehmen. Gibt es eine Option, das zu tun?

Im Moment laufe ich die Funktion vor der module.exports in webpack.config.js, aber es scheint, dass es nicht synchron Betrieb ist. Module.exports werden ausgeführt, bevor die concat()-Funktion endet und Webpack die .scss-Datei nicht finden kann.

function concat(opts) { 
    (...) 
} 

concat({ src : styles, dest : './css/style.scss' }); 

module.exports = [ 
    (...) 
] 

Answer 1

Es scheint ein wenig seltsam SCSS Dateien verketten vor Webpack als diese Art von Operationen ausgeführt werden, in der Regel durch Webpack selbst behandelt.

Das gesagt, es gibt ein paar Möglichkeiten, dies zu lösen.

Der offensichtlichste Weg wäre es, die concat Teile in einer separaten Datei zu extrahieren (z prepare.js) und führen Sie den Build-Prozess starten, indem Sie etwas entlang dieser Linie läuft: node prepare.js && webpack. Das wird zuerst laufen vorbereiten und wenn das ohne Fehler beendet wird, wird Webpack ausgeführt. Normalerweise wird das zum scripts-Teil Ihres package.json hinzugefügt, z.

"scripts": { 
    "build": "node prepare.js && webpack" 
} 

Um die gleiche, aber in einer Webpack integrierte Art und Weise erreichen Sie könnten das gleiche tun, wo Sie die concat Teil in eine separate Datei extrahieren und dann lassen Webpack diese Datei ausführen, bevor beginnt zu bauen, mit Hilfe von Webpack Shell Plugin, z

const WebpackShellPlugin = require('webpack-shell-plugin'); 
module.exports = { 
    ... 
    plugins: [ 
    new WebpackShellPlugin({ 
     onBuildStart:['node prepare.js'] 
    }) 
    ], 
    ... 
}