wake-up-neo.com

Webpack - beobachten und Nodemon starten?

Dank einer excellent answer von @McMath habe ich jetzt ein Webpack, das sowohl meinen Client als auch meinen Server kompiliert. Ich versuche jetzt, webpack --watch nützlich zu machen. Im Idealfall möchte ich, dass es etwas wie nodemon für meinen Server-Prozess gibt, wenn sich das Bundle ändert, und eine Art Browser-Synchronisierung, wenn sich mein Client ändert. 

Ich weiß, dass es ein Bundler/Loader ist und nicht wirklich ein Aufgabenläufer, aber gibt es eine Möglichkeit, dies zu erreichen? Ein Mangel an Google-Ergebnissen scheint zu zeigen, dass ich etwas Neues ausprobiere, aber dies muss bereits geschehen sein.

Ich kann webpack immer in ein anderes Verzeichnis packen und es mit gulp ansehen/kopieren/browsersync-ify it, aber das scheint ein Hack zu sein. Gibt es einen besseren Weg?

node.jswebpackbrowser-syncnodemon
24
XeroxDucati

Konfrontierte das gleiche Problem und fand die nächste Lösung - "webpack-Shell-plugin" ..__ 

ermöglicht das Ausführen von Shell-Befehlen vor oder nach dem Erstellen von Webpacks

Das sind also meine Skripte in package.json:

"scripts": {
      "clean": "rimraf build",
      "prestart": "npm run clean",
      "start": "webpack --config webpack.client.config.js",
      "poststart": "webpack --watch --config webpack.server.config.js",
}

Wenn ich 'start' Skript starte, wird die nächste Skriptsequenz gestartet: clean -> start -> poststart . Und es gibt einen Teil von 'webpack.server.config.js':

var WebpackShellPlugin = require('webpack-Shell-plugin');

...
if (process.env.NODE_ENV !== 'production') {
    config.plugins.Push(new WebpackShellPlugin({onBuildEnd: ['nodemon build/server.js --watch build']}));
}
...

Das "onBuildEnd" -Ereignis wird nur einmal nach dem ersten Build ausgelöst, bei Neuerstellungen wird "onBuildEnd" nicht ausgelöst, daher funktioniert nodemon wie beabsichtigt

21
Jonik
  1. Installieren Sie die folgenden Abhängigkeiten:

npm install npm-run-all webpack nodemon

  1. Konfigurieren Sie Ihre package.json-Datei wie unten gezeigt:

package.json

{
  ...

  "scripts": {
    "start"        : "npm-run-all --parallel watch:server watch:build",
    "watch:build"  : "webpack --watch",
    "watch:server" : "nodemon \"./dist/index.js\" --watch \"./dist\""
  },

  ...

}

Danach können Sie Ihr Projekt einfach mit npm start ausführen.

Vergessen Sie nicht, das WatchIgnorePlugin für das Webpack zu konfigurieren, um den ./dist-Ordner zu ignorieren.

Abhängigkeiten

  1. npm-run-all - Ein CLI-Tool zum Ausführen mehrerer npm-Skripts parallel oder sequentiell.
  2. webpack - webpack ist ein Modulbündler. Sein Hauptzweck besteht darin, JavaScript-Dateien für die Verwendung in einem Browser zu bündeln, aber es ist auch in der Lage, nahezu jede Ressource oder Ressource zu transformieren, zu bündeln oder zu verpacken. 
  3. nodemon - Einfaches Monitorskript zur Verwendung bei der Entwicklung einer node.js-App.
44
Ling

Ich mag die Einfachheit von nodemon-webpack-plugin

webpack.config.js

const NodemonPlugin = require('nodemon-webpack-plugin')

module.exports = {
  plugins: [new NodemonPlugin()]
}

dann einfach Webpack mit dem Flag watch ausführen

webpack --watch
9
galki

Hier müssen keine Plugins verwendet werden. Sie können versuchen, mehrere nodemon-Instanzen wie unten auszuführen. Ändern Sie das folgende Skript für Ihren Anwendungsfall und prüfen Sie, ob es für Sie geeignet ist:

"scripts": {
    "start": "nodemon --ignore './public/' ./bin/www & nodemon --ignore './public/' --exec 'yarn webpack'",
    "webpack": "webpack --config frontend/webpack.config.js"
}
1
Monarch Wadia

Zusätzlich zu der guten Antwort von @ Ling:

Wenn Sie Ihr Projekt einmal erstellen möchten, bevor Sie es mit nodemon anzeigen, können Sie ein Webpack Compiler-Hook verwenden. Der Code des Plugins löst nodemon im done -Hook einmal aus, nachdem das Webpack seine Kompilierung abgeschlossen hat (siehe auch dieses hilfreiche post ).

const { spawn } = require("child_process")

function OnFirstBuildDonePlugin() {
  let isInitialBuild = true
  return {
    apply: compiler => {
      compiler.hooks.done.tap("OnFirstBuildDonePlugin", compilation => {
        if (isInitialBuild) {
          isInitialBuild = false
          spawn("nodemon dist/index.js --watch dist", {
            stdio: "inherit",
            Shell: true
          })
        }
      })
    }
  }
}

webpack.config.js:

  module.exports = {
    ... 
    plugins: [
      ... 
      OnFirstBuildDonePlugin()
    ]
  })

package.json:

"scripts": {
  "dev"  : "webpack --watch"
},

Ich hoffe es hilft.

0
ford04

Sie benötigen keine Plugins, um Webpack und Nodemon zu verwenden. Verwenden Sie einfach diese Skripte in Ihrer package.json

"scripts": {
  "start": "nodemon --ignore './client/dist' -e js,ejs,html,css --exec 'npm run watch'",
  "watch": "npm run build && node ./server/index.js",
  "build": "rimraf ./client/dist && webpack --bail --progress --profile"
},
0
Antoni Xu

@Ling hat eine Antwort sehr nahe an der Richtigkeit. Aber es ist fehlerhaft, wenn jemand zum ersten Mal Wache läuft. Sie müssen die Lösung ändern, um Fehler zu vermeiden.

  1. npm install npm-run-all webpack nodemon ausführen

  2. Erstellen Sie eine Datei mit dem Namen watch-shim.js in Ihrem Stammverzeichnis. Fügen Sie den folgenden Inhalt hinzu, der eine Dummy-Datei und ein Verzeichnis erstellt, wenn diese fehlen.

    var fs = require('fs');

if (!fs.existsSync('./dist')) {
    fs.mkdir('./dist');
    fs.writeFileSync('./dist/bundle.js', '');
}

  3. Richten Sie Ihre Skripte wie in package.json ein. Dies wird nur dann überwacht, wenn die watch-shim.js-Datei erfolgreich ausgeführt wird. Dadurch wird verhindert, dass Nodemon beim ersten Durchlauf aufgrund fehlender Dateien abstürzt.

    {
    ...
    "scripts": {
        "start": "npm run watch",
        "watch": "node watch-shim.js && npm-run-all --parallel watch:server watch:build",
        "watch:build": "webpack --progress --colors --watch",
        "watch:server": "nodemon \"./dist/bundle.js\" --watch \"./dist/*\""
    }
    ...
},
0
Ash Blue