node.js - how - Webpack--watch y launch nodemon?

nodemon webpack dev server

Question

Gracias a la excelente respuesta de @McMath, ahora tengo un paquete web que compila tanto mi cliente como mi servidor. Ahora estoy tratando de hacer un webpack --watch ser útil. Idealmente me gustaría que genere algo como nodemon para mi proceso de servidor cuando cambie ese paquete, y un poco de sincronización de browsers para cuando cambie mi cliente.

Me doy cuenta de que es un paquete / cargador y no es realmente un corredor de tareas, pero ¿hay alguna manera de lograr esto? La falta de resultados de google parece indicar que estoy intentando algo nuevo, pero esto ya debe haber sido hecho.

Siempre puedo tener el paquete de webpack en otro directorio y usar gulp para verlo / copiarlo / browsersync-ify it, pero eso parece un truco ... ¿Hay una manera mejor?

Answer 1

Enfrentó el mismo problema y encontró la siguiente solución: "webpack-shell-plugin". Eso

le permite ejecutar cualquier comando de shell antes o después de compilaciones de webpack

Entonces, esas son mis scripts en 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 ejecuto el script ''start'', se inicia la siguiente secuencia de script: clean -> start -> poststart. Y hay una parte 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'']}));
}
...

El evento "onBuildEnd" se dispara solo una vez después de la primera compilación, las reconstrucciones no desencadenan "onBuildEnd", por lo que nodemon funciona según lo previsto

Answer 2

No necesita ningún complemento para usar el paquete web y nodemon, solo use estos scripts en su paquete. 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"
},

Answer 3

No es necesario usar complementos aquí. Podría intentar ejecutar múltiples instancias de nodemon como a continuación. Intente modificar el siguiente script para su caso de uso, y vea si le funciona:

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

Answer 4

1. Instale las siguientes dependencias:

npm install npm-run-all webpack nodemon

2. Configure su archivo package.json a algo como se ve a continuación:

package.json

{
  ...

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

  ...

}

Después de hacerlo, puede ejecutar fácilmente su proyecto utilizando npm start .

No te olvides de la configuración WatchIgnorePlugin para que el paquete web ignore la carpeta ./dist .

Dependencias

1. npm-run-all : una herramienta CLI para ejecutar múltiples scripts npm en paralelo o secuencial.
2. webpack - webpack es un paquete de módulos. Su objetivo principal es agrupar los archivos JavaScript para su uso en un navegador, pero también es capaz de transformar, agrupar o empacar casi cualquier recurso o activo.
3. nodemon : script de monitor simple para usar durante el desarrollo de una aplicación node.js.

Answer 5

@Ling tiene una respuesta muy cercana a ser correcta. Pero comete un error la primera vez que alguien ejecuta la vigilancia. Tendrá que modificar la solución para evitar errores.

1. Ejecute npm install npm-run-all webpack nodemon

2. Crea un archivo llamado watch-shim.js en tu raíz. Agregue los siguientes contenidos, que crearán un archivo ficticio y un directorio si faltan.

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

3. Configure sus scripts como en package.json . Esto solo se ejecutará si el archivo watch-shim.js ejecuta correctamente. De esta manera se evita que Nodemon se bloquee debido a que faltan archivos en la primera ejecución.

   {
       ...
       "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/*/""
       }
       ...
   },