Webpack Hot Reloader + ReactJS und Babel

Question

Guten Abend,

Ich bin ein wenig Mühe die heiße Nachladen Merkmal webpack Umsetzung mit. Ich praktiziere es, meine Entwicklungsumgebung selbst einzurichten, anstatt jemandes Standard zu nehmen und nichts zu lernen. Im Terminal kann ich sehen, dass meine Ausgabedatei bundle.js auf meinem Express-Server erstellt wird, aber es gibt eine Trennung zwischen diesem Server und dem, was im Client gerendert wird. Ich weiß, dass dieser Beitrag ziemlich lang ist, aber ich möchte die meisten Informationen zur Verfügung stellen.

Zuerst meine webpack.config.js Datei:

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

module.exports = { 
    devtool: "source-map", 
    entry: ["./src/main.js"], 
    output: { 
    path: path.join(__dirname, "_build"), 
    filename: "bundle.js", 
    publicPath: "/static/" 
    }, 
    plugins:[ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    module:{ 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, "src/"), 
     loader: "babel-loader" 
     }, 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, "src/stylesheets"), 
     loaders: ["style", "css", "sass"] 
     } 
    ] 
    } 
} 

Eine der Fragen, die ich mit dieser Datei haben, ist, dass ich den Eindruck, ich meine entry Schlüssel sollte ein Array als Wert haben, der wie folgt aussieht: ["webpack-hot-middleware/src","./src/main.js"]

Aber ich bekomme diese Fehlermeldung:

ERROR in multi webpack-hot-middleware/src ./src/main.js 
Module not found: Error: Can't resolve 'webpack-hot-middleware/src' in '/Users/MMac/Freelance/slots' 

ich jetzt nicht, warum dies geschieht, wenn alle anderen Beispiele ich arbeite Aus dem Gebrauch dieses.

Zweite hier ist mein devServer.js

var path = require("path"); 
var express = require("express"); 
var PORT = process.env.PORT || 7887; 
var webpack = require("webpack"); 
var config = require("./webpack.config"); 
var app = express(); 
var compiler = webpack(config); 

var bodyParser = require("body-parser"); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.use(express.static(path.join(__dirname + "/_build"))); 

app.use(require('webpack-hot-middleware')(compiler)); 

app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

app.listen(PORT, function(err) { 
    if (err) { 
    console.log(err); 
    return; 
    } 
    console.log('Listening at ' + PORT); 
}); 

Auch dieses Set up ‚richtig‘ gemäß den anderen Beispielen arbeite ich aus der.

Schließlich mein package.json

{ 
    "name": "slots", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "watch": "./node_modules/.bin/webpack -d" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-transform-object-rest-spread": "^6.22.0", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "body-parser": "^1.16.0", 
    "css-loader": "^0.26.1", 
    "express": "^4.14.0", 
    "node-sass": "^4.3.0", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^5.0.2", 
    "react-router": "^3.0.1", 
    "react-router-redux": "^4.0.7", 
    "react-transform-hmr": "^1.0.4", 
    "redux": "^3.6.0", 
    "redux-thunk": "^2.2.0", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    "webpack-dev-middleware": "^1.9.0", 
    "webpack-hot-middleware": "^2.15.0" 
    } 
} 

Dank für das über dieses Thema suchen und ich freuen uns über jede hilfreiches Feedback.

Answer 1

Hier ist nur ein Schuss im Dunkeln (es gibt so viele Variablen, die Hot-Module-Ersatz auslösen können).

Ich denke, Sie haben Recht, das Problem liegt in Ihrem Einstiegspunkt. versuch dies stattdessen.

entry: [ "webpack-hot-middleware/client", "./src/main.js" ], 

Auch müssen Sie Ihre Babel Presets zu Ihrer Konfiguration hinzufügen. Sobald Sie den reactive-hmre hinzufügen, sollte es funktionieren. Siehe unten zum Beispiel.

Wenn Sie eine .babelrc-Datei haben, können Sie sie hier auch deklarieren.

{ 
    "presets": ["react", "es2015"], 
    "env": { 
    "development": { 
     "presets": ["react-hmre"] 
    } 
    } 
}