Hacer que la actualización en caliente del paquete web funcione correctamente en mi aplicación web isomorfa

Question

Feb 09, 2016, 09:45 PM

webpack-hmr node.js webpack express webpack-dev-server

Hacer que la actualización en caliente del paquete web funcione correctamente en mi aplicación web isomorfa

Estoy creando una aplicación web con un nodo / backend express y una interfaz de reacción. Obtuve (creo) que la mayoría está en funcionamiento, pero el último paso para lograr que el navegador realice una actualización en caliente no funciona según lo previsto. Intentaré publicar toda la configuración relevante aquí. Avíseme si necesita algo más para averiguar dónde he cometido un error:

Comienzo mi aplicación connode ./server/index.js

webpack.config.js var ruta = require ('ruta'); var webpack = require ('webpack');

let webpackConfig = {
    name: 'server',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist/',
    },
    resolve: {
      extensions: [
        '', '.js', '.jsx', '.json'
      ]
    },
    module: {
        loaders: [
            { 
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query:{
                    presets: ['es2015', 'react', 'stage-2']
                }
            },
            {
                test:  /\.json$/, 
                loader: 'json-loader'
            }
        ]
    },
    entry: [
        'webpack-hot-middleware/client',
        './app/client/client.jsx'   
    ],
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]   
};
export default webpackConfig;

index.js solo incluya 'babel-register' y 'server.js'

server / server.js importar webpack desde 'webpack'; importar webpackConfig desde '../webpack.config'; importar webpackDevMiddleware desde 'webpack-dev-middleware'; importar webpackHotMiddleware desde 'webpack-hot-middleware';

import express from 'express';

const app = express();
const renderPage = () => {
    return `
            <!doctype html>
            <html>
            <head>
                <title>Brewing Day</title>
                <meta charset='utf-8'>
            </head>
            <body>
                <h1>Hello from server.js!!</h1>
                <div id='root'></div>
                <script src='/dist/bundle.js'></script>
            </body>
            </html>
            `;
};

const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath })
);
app.use(webpackHotMiddleware(compiler));

app.use((req, res, next) => {
  res.status(200).end(renderPage());
});

const server = app.listen(3005, () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`Listening at http://${host}:${port}`);
})

export default server;

Yapp / client / client.jsx ese es el punto de entrada en la configuración del paquete web:

import React from 'react';
import ReactDOM from 'react-dom';
import Application from '../components/application.jsx';

window.addEventListener('load', () => {
    ReactDOM.render(<Application />, document.getElementById('root')
    );
});

En la consola, cuando lo enciendo, enumera la siguiente línea:

webpack built cc1194a11614a3ba54a3 in 730ms

Cuando hago un cambio por ejemploclient.jsx oapplication.jsx que contiene el componente rect, obtengo dos nuevas líneas en mi consola:

webpack building...
webpack built 8d340a8853d3cfe9478d in 195ms

¡Hasta aquí todo bien!

Sin embargo, en el navegador, no se actualiza y da la siguiente advertencia en la consola:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
[HMR]  - ./app/components/application.jsx

Traté de agregar al azarmodule.hot.accept() aapplication.jsx. Eso elimina las advertencias, pero aún no hay actualización sin presionar F5 y volver a cargar el navegador.

¿Alguna idea de lo que me estoy perdiendo aquí? He visto otro ejemplo configurado casi como el mío, donde esto funciona sin ningún tipo demodule.hot.accept() llama a cualquier parte, pero no puedo ver dónde mi configuración difiere de la otra configuración.

Cualquier ayuda será apreciada.