Webpack Hot Reloader + ReactJSとBabel

Question

おはよう、

webpackのホットリロード機能を実装するのに少し問題があります。私は自分の開発環境を自分で設定する代わりに、他人の定型文を取って実際には何も学習しないようにしています。端末では、私の出力ファイルbundle.jsが私のエクスプレスサーバ上に構築されているのがわかりますが、そのサーバとクライアントにレンダリングされているものとの間に切断があります。私はこの投稿がかなり長いことを知っていますが、私はできるだけ多くの情報を提供したいと思います。

まず私のwebpack.config.jsファイル：["webpack-hot-middleware/src","./src/main.js"]

：私は、そのファイルを持っている問題の

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"] 
     } 
    ] 
    } 
} 

一つは、私が印象の下に私のentryキーは次のようになります値として配列を持つべきだということです

しかし、私はこのエラーを取得する：ときに私が働いている他のすべての例

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' 

私は今、なぜこれが起こっているしていませんこれを使用してオフにします。

第二には、ここで再び、これは私がのオフに働いている他の例によると「正しく」に設定されている私の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); 
}); 

です。

最後に私の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" 
    } 
} 

この記事を見ているのおかげで、私は、任意の有用なフィードバックを感謝しています。

Answer 1

ここでは暗闇の中でのショットです（ホットモジュールの置き換えを引き起こす可能性のある変数がたくさんあります）。

私はあなたが正しいと思いますが、問題はあなたのエントリーポイントにあります。代わりにこれを試してください。

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

また、設定にバベルプリセットを追加する必要があります。 react-hmreを追加するとうまくいくはずです。例えば以下を参照してください。

module: { 
loaders: [ 
    { 
    test: /\.js$/, 
    loader: "babel", 
    exclude: /node_modules/, 
    query: { "presets": ["es2015","react", "react-hmre"] } 
    } 
] 
}, 

.babelrcファイルがある場合は、ここで宣言することもできます。

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