Tengo este archivo backend-dev.js que es principalmente una configuración de paquete web. Lo uso para ejecutar mi servidor express desde el archivo incluido. Permanece encendido y reinicia el servidor ante cualquier cambio. ¿Hay alguna configuración posible que se pueda agregar para actualizar automáticamente el navegador también cada vez que cambie el código? Esto es lo que tengo en backend-dev.js :
const path = require('path'); const webpack = require('webpack'); const spawn = require('child_process').spawn; const HtmlWebpackPlugin = require('html-webpack-plugin'); const compiler = webpack({ // add your webpack configuration here entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: "bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['env', 'es2015', 'stage-2'] } } } ] }, /*plugins: [ new HtmlWebpackPlugin({ title: 'Project Demo', hash: true, template: './views/index.ejs' // Load a custom template (ejs by default see the FAQ for details) }) ],*/ node: { __dirname: false }, target: 'node' }); const watchConfig = { // compiler watch configuration // see https://webpack.js.org/configuration/watch/ aggregateTimeout: 300, poll: 1000 }; let serverControl; compiler.watch(watchConfig, (err, stats) => { if (err) { console.error(err.stack || err); if (err.details) { console.error(err.details); } return; } const info = stats.toJson(); if (stats.hasErrors()) { info.errors.forEach(message => console.log(message)); return; } if (stats.hasWarnings()) { info.warnings.forEach(message => console.log(message)); } if (serverControl) { serverControl.kill(); } // change filename to the relative path to the bundle created by webpack, if necessary(choose what to run) serverControl = spawn('node', [path.resolve(__dirname, 'dist/bundle.js')]); serverControl.stdout.on('data', data => console.log(data.toString())); serverControl.stderr.on('data', data => console.error(data.toString())); });Excelente pregunta: la resolví de la siguiente manera:
express tiene dos módulos que puedes instalar para refrescar en caliente sin refrescar el navegador, y se refrescará automáticamente: te dejo mi configuración.
npm i livereload
npm me conecto-livereload
const livereload = require('livereload'); const connectLivereload = require('connect-livereload'); const liveReloadServer = livereload.createServer(); liveReloadServer.watch(path.join(__dirname, '..', 'dist', 'frontend')); const app = express(); app.use(connectLivereload());Tenga en cuenta que la carpeta que desea monitorear está en dist/frontend. Cambia la carpeta que quieres monitorear para que funcione: Para monitorear el backend estoy usando NODEMON
livereload abre un puerto para el navegador en el backend para exponer los cambios: ¿cómo ocurre la conexión? Es fácil; express con " connect-livereload " e inyecte un script que monitorea ese puerto: si ocurre un cambio, express notifica al navegador y el navegador se actualizará por usted .
Dejo la información lo más simple posible para probar, y no recomiendo usarla así: Para usarla debes separar los ambientes de desarrollo y producción. Lo mantengo simple para que sea fácil de entender.
Aquí les dejo el link más relevante que encontré: Espero que les sea de ayuda también.
https://bytearcher.com/articles/refresh-changes-browser-express-livereload-nodemon/