web-dev-qa-db-fra.com

Webpack --watch et lancer nodemon?

Grâce à une excellente réponse by @McMath, j'ai maintenant webpack compilant à la fois mon client et mon serveur. Je vais maintenant essayer de rendre webpack --watch utile. Idéalement, j'aimerais qu'il génère quelque chose comme nodemon pour le processus de mon serveur lorsque cet ensemble est modifié, et une sorte de version de browsersync pour celle de mon client. 

Je me rends compte que c'est un paquet/chargeur et pas vraiment un coureur de tâches, mais y a-t-il un moyen d'accomplir cela? Un manque de résultats sur Google semble indiquer que j'essaie quelque chose de nouveau, mais cela doit déjà avoir été fait.

Je peux toujours avoir le paquet webpack dans un autre répertoire et utiliser gulp pour le regarder/le copier/browsersync-ify, mais cela semble être un hack. Y a-t-il un meilleur moyen?

node.jswebpackbrowser-syncnodemon
24
XeroxDucati

Face au même problème et a trouvé la solution suivante - "webpack-Shell-plugin" . 

vous permet d'exécuter toutes les commandes Shell avant ou après la compilation de webpack

Voilà donc mes scripts dans 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",
}

Si j'exécute le script 'start', la séquence suivante est lancée: clean -> start -> poststart . Et il existe une partie de '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']}));
}
...

L'événement "onBuildEnd" ne se déclenche qu'une seule fois après la première construction. Les reconstructions ne sont pas des déclencheurs "onBuildEnd", donc nodemon fonctionne comme prévu.

21
Jonik
  1. Installez les dépendances suivantes:

npm install npm-run-all webpack nodemon

  1. Configurez votre fichier package.json sur quelque chose comme indiqué ci-dessous:

package.json

{
  ...

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

  ...

}

Après cela, vous pouvez facilement exécuter votre projet en utilisant npm start.

N'oubliez pas que config WatchIgnorePlugin pour webpack ignore le dossier ./dist.

Les dépendances

  1. npm-run-all - Outil CLI permettant d'exécuter plusieurs scripts npm en parallèle ou séquentiel.
  2. webpack - webpack est un bundle de modules. Son objectif principal est de regrouper des fichiers JavaScript pour les utiliser dans un navigateur, mais il est également capable de transformer, regrouper ou empaqueter à peu près n'importe quelle ressource ou ressource. 
  3. nodemon - Script de moniteur simple à utiliser lors du développement d'une application node.js.
44
Ling

J'aime la simplicité de nodemon-webpack-plugin

webpack.config.js

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

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

il suffit ensuite de lancer WebPack avec le drapeau watch

webpack --watch
9
galki

Il n'est pas nécessaire d'utiliser des plugins ici. Vous pouvez essayer d’exécuter plusieurs instances nodemon comme ci-dessous. Essayez de modifier le script suivant pour votre cas d'utilisation et voyez si cela fonctionne pour vous:

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

Vous n'avez besoin d'aucun plugin pour utiliser webpack et nodemon, utilisez simplement ces scripts sur votre 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 a une réponse très proche d'être correcte. Mais il se trompe la première fois que quelqu'un exécute une surveillance. Vous devrez modifier la solution pour éviter les erreurs.

  1. Exécuter npm install npm-run-all webpack nodemon

  2. Créez un fichier appelé watch-shim.js à la racine. Ajoutez le contenu suivant, ce qui créera un fichier factice et un répertoire s'ils sont manquants.

    var fs = require('fs');

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

  3. Configurez vos scripts comme suit dans package.json. Cela ne fonctionnera que si le fichier watch-shim.js est exécuté correctement. Ainsi, empêchant Nodemon de tomber en panne à cause de fichiers manquants lors de la première exécution.

    {
    ...
    "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