Question

晚上好，

我在实现webpack的热重新加载功能时遇到了一些麻烦。我正在练习自己设置我的开发环境，而不是采取其他人的样板，而不是实际学习任何东西。在终端中，我可以看到我的输出文件bundle.js正在我的快速服务器上构建，但是该服务器与客户端中呈现的内容之间存在脱节。我知道这篇文章很长，但我想提供尽可能多的信息。

首先是我的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"]
    }
  }
}

Webpack Hot Reloader + ReactJS和Babel

1 个答案: