javascript - hot - React+Webpack HMR está actualizando la página(no cargando en caliente)

react-hot-loader webpack 4

Question

Estoy teniendo problemas para que el cargador de webpack reaccione correctamente.

Cuando cargo la página obtengo lo siguiente como era de esperar:

[HMR] Esperando la señal de actualización de WDS ...
[WDS] Reemplazo de módulo activo habilitado.

Pero cuando guardo un cambio, la página automáticamente actualiza el navegador (en lugar de un reemplazo HMR).

//webpack.config.js

 {
  entry: {
    client: ''webpack-dev-server/client?http://localhost:8786'', // WebpackDevServer host and port
    app: "./HelloWorld.tsx"
  },
  devtool: process.env.WEBPACK_DEVTOOL || ''cheap-module-source-map'',
  output: {
        path: path.join(__dirname, ''dist''),
        filename: ''[name].entry.js''
  },
  module: {
    loaders: [
      {
        test: //.ts(x?)$/,
        loaders: [''react-hot'', ''babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react'', ''ts-loader'']
      }
    ]
  },
    devServer: {
        contentBase: "./dist",
    port:8786
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
}

comando: webpack-dev-server --hot --inline

en una nota al margen interesante si uso babel-preset-react-hmre todo funciona como se esperaba. (Sin embargo, realmente no quiero usar esto ya que parece menos compatible que el cargador de reacción apropiado).

Answer 1

Me encontré con este problema. Un par de cosas:

Para ayudar a depurar su problema en particular, intente habilitar "Conservar registro" (en las herramientas de desarrollo de Chrome). Esto persistirá en los registros de la consola durante las actualizaciones de la página, por lo que al menos podrá ver los mensajes que el servidor webpack-dev-server está iniciando antes de que active una actualización.

En mi caso, webpack-dev-server fue refrescante porque no había optado por HMR en mi archivo js de entrada. Agregar la siguiente línea al archivo resolvió el problema:

// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()

Para obtener detalles sobre la API module.hot, los documentos HMR de la carpeta web son muy útiles.