javascript – Webpack-dev-server no hace live-reload

Por mas que configuro y busco en algunos foros, nada me hace que el devserver de webpack haga el live-reload, realiza el build bien y el devserver carga los archivos normalmente, pero a la hora de realizar algun cambio supuestamente realiza la compilacion pero no se refleja ningun cambio.

No logro entender porque no funciona, el live-reload, si todo esta bien, probe la configuracion por defecto y tampoco funciona.

const webpackParts = require('./webpack/webpack.parts');

 // - Path: forma parte de NodeJS, nos sirve para trabajar con archivos y rutas de directorios.
const path = require('path');
/**
 * Glob
 * Hace coincidir los archivos con los patrones que usa el shell, como estrellas y otras cosas.
 * Esta es una implementación global en JavaScript. Utiliza la biblioteca minimatch para 
 * hacer su correspondencia.
 */
const glob = require("glob");
// - Declaracion de un modulo node.
module.exports = {
  mode: 'development',
  cache:true,
  // - Input: Entrada donde webpack buscara los archivos fuentes.
  /**
   *
   * path.resolve(), el método resolve del módulo path,sirve para resolver
   * una secuencia de cadenas con caminos, en un camino completo.
   * Es como una especie de concatenador de caminos,que devuelve uncamino absoluto
   * juntando todas las secuencias.
   *
   * __dirname, equivale en NodeJS al directorio del disco duro donde está situado 
   * nuestro módulo,en el que estamos programando.
   */
  entry: {
    app: path.resolve(__dirname, 'src/js', 'app.js'),
    vendors: path.resolve(__dirname, 'src/js', 'vendors.js'),
    style: path.resolve(__dirname, 'src/styl', 'global.styl'),
    images: glob.sync(path.resolve(__dirname, 'src/images/',  '**/*.*')),
},
  // - Output: Salida donde webpack depositara los archivos fuentes procesados.
  output:webpackParts.getOutputByName(__dirname),
  // - Carga de los plugins a utilizar.
  plugins: webpackParts.getPlugins(__dirname),
  // - Carga de los loaders y reglas.
  /**
   *
   * Los Loaders permiten procesar y transformar el código fuente de la aplicación, según se
   * importa en el archivo Javascript mediante la sentencia import.
   *
   */
  module: {
    rules: webpackParts.getRules()
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    port: 3000,
    host: '0.0.0.0',
    publicPath: '/assets/js/',
    watchContentBase: true
  }
};

Hot top-up site (webpack-dev-server) behind nginx reserve proxy docker

I try to configure a nginx container as a proxy for my development site that runs on webpack-dev-server. Unfortunately, I have the problem of loading static files (404 not found).

When the request reaches the index.html file of the proxy server, try to find the static files at http: // localhost: 8081 / static / js / bundle.js, which is not the actual location.

Here is my index.html:





  
  
  
  
  
  Energy plan



  
  

Here is my nginx configuration:

server {
listen 80;
servername localhost;
error_log /var/log/nginx/nginx_error.log warn;

location / energy plan / {
resolve 127.0.0.11 ipv6 = off;
proxy_pass http: //host.docker.internal: 3000 /;

proxy_http_version 1.1;
proxy_set_header Host $ host;
proxy_set_header X-Real-IP $ remote_addr;
proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $ schema;
proxy_set_header X-Forwarded-Host $ host;
proxy_set_header X-Forwarded-Port $ server_port;
proxy_cache_bypass $ http_upgrade;
proxy_set_header Upgrade $ http_upgrade;
proxy_set_header Connection "update";
}

Location / {
root / usr / share / nginx / html;
index index.html index.htm;
}

error_page 500 502 503 504 / 50x.html;
location = /50x.html {
root / usr / share / nginx / html;
}

}