Heißes Aktualisieren des Webpacks, damit es in meiner isomorphen Web-App korrekt funktioniert

Question

Feb 09, 2016, 09:45 PM

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

Heißes Aktualisieren des Webpacks, damit es in meiner isomorphen Web-App korrekt funktioniert

Ich erstelle eine Webapp mit einem Node / Express-Backend und einem React Frontend. Ich habe (glaube ich) das meiste davon zum Laufen gebracht, aber der letzte Schritt, den Browser dazu zu bringen, eine heiße Aktualisierung durchzuführen, funktioniert nicht wie beabsichtigt. Ich werde versuchen, alle relevanten Einstellungen hier zu veröffentlichen. Bitte lassen Sie mich wissen, wenn Sie etwas anderes benötigen, um herauszufinden, wo ich einen Fehler gemacht habe:

Ich starte meine Anwendung mitnode ./server/index.js

webpack.config.js var path = require ('path'); 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 nur 'babel-register' und 'server.js' angeben

server / server.js Webpack von 'Webpack' importieren; importieren Sie webpackConfig aus '../webpack.config'; importieren Sie webpackDevMiddleware von 'webpack-dev-middleware'; importiere webpackHotMiddleware von '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;

Und app / client / client.jsx das ist der Entypoint in der Webpack-Konfiguration:

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

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

enn ich es in der Konsole starte, wird die folgende Zeile aufgelistet:

webpack built cc1194a11614a3ba54a3 in 730ms

Wenn ich zum Beispiel @ ändeclient.jsx oderapplication.jsxenn @ die Rect-Komponente enthält, werden in meiner Konsole zwei neue Zeilen angezeigt:

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

So weit, ist es gut

Im Browser wird jedoch keine Aktualisierung durchgeführt, und in der Konsole wird die folgende Warnung angezeigt:

[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

Ich habe versucht, nach dem Zufallsprinzip @ hinzuzufügmodule.hot.accept() zuapplication.jsx. Damit werden die Warnungen beseitigt, aber es wird immer noch kein Update durchgeführt, ohne F5 zu drücken und den Browser neu zu laden.

Eine Idee, was ich hier vermisse? Ich habe ein anderes Beispiel gesehen, das fast so aufgebaut ist wie das meine, wo dies ohne @ funktioniermodule.hot.accept() ruft überall an, aber ich sehe nicht, wo sich mein Setup vom anderen unterscheidet.

Any und jede Hilfe wird geschätzt.