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