Webpack热重装机+ ReactJS和巴别塔

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

此外，您还需要添加您的巴别塔预设到您的配置。一旦添加了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"]
    }
  }
}