Updates in meiner React-Anwendung werden nicht berücksichtigt Webpack-Dev-Server

Question

Ich versuche, eine Umgebung für meine React-Anwendung mit Webpack und Babel einzurichten. Ich benutze JSX um Komponenten zu implementieren und ich möchte Live Reload nutzen.

Hier ist meine package.json Datei:

{ 
    (...) 
    "scripts": { 
    "start": "webpack-dev-server --hot --inline" 
    }, 
    "dependencies": { 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "jsx-loader": "^0.13.2", 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

Hier ist meine Webpack Konfiguration:

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: [ 
    'webpack-dev-server/client?http://0.0.0.0:8080', 
    'webpack/hot/only-dev-server', 
    APP_DIR + '/index.jsx' 
    ], 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loaders: ['react-hot', 'babel'] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ] 
}; 

module.exports = config; 

Nach npm run start und mit dieser Konfiguration ausgeführt zu haben, sehe ich in meiner Konsole, die Updates in einer JSX-Datei werden erkannt, aber der Browser wird nicht aktualisiert. Wenn ich mir die Datei module.js anschaue, werden meine Aktualisierungen nicht berücksichtigt.

Ausführen des Befehls webpack -d, sie sind ...

dieses Repo Siehe: https://github.com/templth/react-webpack-hot-reload.

Zusätzliche Hinweise. sehe ich die folgenden Spuren in der JavaScript-Konsole des Browsers:

[HMR] Waiting for update signal from WDS... 
Download the React DevTools for a better development experience: https://(...)/react-devtools 
XHR finished loading: GET "http://localhost:8080/sockjs-node/info?t=1467375470671".AbstractXHRObject._start @ abstract-xhr.js:132(anonymous function) (...) 
[WDS] Hot Module Replacement enabled. 
[WDS] App updated. Recompiling... 
[WDS] App hot update... 
[HMR] Checking for updates on the server... 
GET http://localhost:8080/src/client/0cf06dae430007853b6f.hot-update.json 404 (Not Found)hotDownloadManifest @ bootstrap (...) 
[HMR] Cannot find update. Need to do a full reload! 

nur-dev-server.js: 28 [HMR] (wahrscheinlich wegen Neustart des webpack-dev-Servers)

und in der Konsole, die den Webpack-Dev-Server gestartet

Hash: 85771179bfa8706bc10f 
Version: webpack 1.13.1 
Time: 275ms 
          Asset  Size Chunks    Chunk Names 
         bundle.js 991 kB  0 [emitted] main 
0.8073da5d40a8dd413f96.hot-update.js 3.6 kB 0, 0 [emitted] main, main 
8073da5d40a8dd413f96.hot-update.json 36 bytes   [emitted] 
chunk {0} bundle.js, 0.8073da5d40a8dd413f96.hot-update.js, 0.8073da5d40a8dd413f96.hot-update.js (main) 897 kB [rendered] 
    [76] ./src/client/app/index.jsx 3.58 kB {0} [built] 
    + 255 hidden modules 
webpack: bundle is now VALID. 

Vielen Dank für Ihre Hilfe!

Answer 1

Ihr Einstiegspunkt sollte nur webpack/hot/dev-Server

sein (webpack/hot/nur-dev-Server für die ist, wenn Sie wollen/müssen manuelle Nachladen finden Sie unter https://github.com/webpack/webpack/issues/418)

Außerdem müssen Sie in Ihrer Dev-Konfiguration einen publicPath angeben (z. B. output.publicPath). Zum Beispiel:

publicPath: 'http://localhost:8080/' 

(Ein absoluter Pfad ist für die Bilder in CSS hier benötigt, um mit sourcemaps zu arbeiten)

In Ihrem prod config Sie noch etwas brauchen hier zB

publicPath: '/', 

Sie brauchen dies auch im Einstiegspunkt für HMR zu arbeiten. (Es wird von minification in prod als 'nicht erreichbar' Code entfernt werden)

if (module.hot) { 
    module.hot.accept(); 
} 

Answer 2

UPDATE: Verwenden der GitHub Repo.

Eine mögliche Lösung ist das html-webpack-plugin, um Ihre Bundles zu bedienen.Alles, was Sie tun müssen, ist npm es installieren und fügen Sie Ihre Plugins configs:

npm i html-webpack-plugin --save-dev 

Verbrauch:

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new HtmlWebpackPlugin({ 
     template: './src/client/index.html' 
    }), 
    ] 

die <script src="public/bundle.js" type="text/javascript"></script> von Ihrem index.html entfernen, jetzt wird es automatisch hinzugefügt werden Sie.

Dann Zugriff http://localhost:8080/ und alles sollte gut funktionieren.

Bonus: Sie können html-loader und die --inline config verwenden, um Hot Reload auch auf HTML zu verwenden.

npm i html-loader --save-dev

Verbrauch:

{ 
    test: /\.html$/, 
    loader: 'html-loader'   
} 

Dann fügen Sie es zu Ihrem package.json:

"start": "webpack-dev-server --inline --hot" 

Erklärung in https://webpack.github.io/docs/webpack-dev-server.html, „Inline-Modus " Sektion.

---

Eine andere Lösung Sie die devserver Config testen können in Ihrem webpack.config.js verwendet:

module.exports = { 
    devServer: { 
     inline: true, 
     port: 3333 
    }, 
    ... 

Dann benutze ich die publicPath:

publicPath: 'http://localhost:3333/' 

Und in meinem Paket. json:

"start": "webpack-dev-server --content-base app", 

Re bewegen diese Zeilen aus webpack.config.js:

'webpack-dev-server/client?http://0.0.0.0:8080', 
'webpack/hot/only-dev-server', 

Auch können Sie verwenden nur „npm Start“, „Ausführen“ müssen, ist in diesem Fall nicht.

Ich hoffe, es hilft.