Saltar al contenido

El servidor de desarrollo de Webpack no se recarga automáticamente

Te traemos la contestación a este atolladero, o por lo menos eso creemos. Si tienes interrogantes déjanoslo saber en un comentario y sin dudas

Solución:

De acuerdo con la documentación del servidor de desarrollo del paquete web, debe agregar este punto de entrada a la configuración del paquete web para admitir la actualización automática.

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");

jontem señaló en su respuesta que a mi configuración le faltaba un webpack-dev-server cliente.

Estos son los pasos que tomé para aplicar su solución y también configurar HMR.

config/webpack.config.dev.js

module.config = 
  // ...
  entry: [
    // converted entry to an array
    // to allow me to unshift the client later
    path.resolve(__dirname, '../src/index.jsx')
  ],
  // ...
  module: 
    loaders: 
      // ...
      
        // Use style loader instead of ExtractTextPlugin
        // To allow for style injection / hot reloading css
        exclude: /node_modules/,
        loaders: [ 'style', 'css', 'postcss', 'sass' ],
        test   : /.scss$/
      ,
      // ...
    
  


scripts/dev.js

'use strict';

const WebpackDevServer = require('webpack-dev-server');
const config           = require('../config/webpack.config.dev.js');
const webpack          = require('webpack');

// unshift `webpack-dev-server` client
// and hot dev-server
config.entry.unshift('webpack-dev-server/client?/', 'webpack/hot/dev-server');

const compiler = webpack(config);

// ...

Tuve el mismo problema y la siguiente configuración habilitada static y la recarga automática del paquete en memoria. los key es habilitar devServer.watchContentBase.

config/webpack.config.dev.js

...
module.exports = 
    ...
    devServer: 
        contentBase: ...,
        publicPath: ...,
        watchContentBase: true
    ,
    ...

paquete.json


    ...
    "scripts": 
        "develop": "webpack-dev-server --open --mode development --config config/webpack.config.dev.js",
        ...
    
    ...

Sección de Reseñas y Valoraciones

Al final de la artículo puedes encontrar las explicaciones de otros desarrolladores, tú asimismo puedes mostrar el tuyo si dominas el tema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *