Webpack Hot Reloader + ReactJS和Babel

Question

晚上好，

我在實現webpack的熱重載功能時遇到了一些麻煩。 我正在練習自己設置開發環境，而不是照搬別人的樣板而沒有實際學習任何東西。 在終端中，我可以看到我的輸出文件bundle.js是在我的Express服務器上構建的，但是該服務器與客戶端中呈現的內容之間沒有連接。 我知道這篇文章很長，但我想提供盡可能多的信息。

首先我的webpack.config.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密鑰應具有一個數組，其值應如下所示： ["webpack-hot-middleware/src","./src/main.js"]

但是我得到這個錯誤：

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

另外，您需要將babel預設添加到配置中。 一旦添加了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"]
    }
  }
}