问题标签 [webpack-hot-middleware]

我正在尝试让热重载与我的设置一起使用。目前，它是这样工作的——

服务器.js

gulpfile.babel.js

现在，

• 如果我访问localhost:5000. 有用
• 如果我访问localhost:3000/build/client.js，它也有效

但是，如果我更新了一些我没有得到实时更新的东西，我需要刷新...... :(

查看网络选项卡，我看到一个失败的请求 http://localhost:5000/__webpack_hmr，我认为这可能是原因。

http://localhost:5000/__webpack_hmr实际上应该是http://localhost:3000/__webpack_hmr

但是，我不知道如何纠正这个

我已经在 ReactJS 上工作了一段时间，我接触过很多模块生态系统（Webpack、Babel、React）等。

我对webpack配置有一些了解，我已经完成了基本配置。见下文

babelrc 配置是，

我计划不使用 dev-server，而是计划编写在 Hapi.JS 上运行的 Webserver。

问题：

1. 现在我正在使用react-transform-hmr。我需要使用 webpack-dev-middleware 和 webpack-hot-middleware 吗？
2. 我应该如何实现/连接 react-transform-hmr 与我的 Hapi 网络服务器？
3. 如果我要使用这个插件再次使用 webpack-dev-server 和 webpack-hot-middleware

https://www.npmjs.com/package/hapi-webpack-plugin

那么react-transform-hmr 有什么用呢？

& 我看到其中一个样板也在使用这个

https://github.com/Dindaleon/hapi-react-starter-kit/blob/master/webpack/hapiWebpack.js

4. 有人能解释一下 webpack-hot-middleware,webpack-dev-middleware,babel-transform-hmr 的用途吗？

我在 webpack-dev-middleware 上遇到了一些麻烦，而不是使用 react 无状态函数进行热重载，但是如果我创建一个类扩展组件，它就可以正常工作。

例如，这非常有效。

然而，这失败得很惨。

错误：

我有一个与 webpack 捆绑的 Express 服务器应用程序。客户端也与 webpack 捆绑在一起，并由服务器使用 webpack-dev-middleware 和 webpack-hot-middleware 为 HMR 在开发模式下提供服务。

当我更改 React 组件时，更改应该发生在客户端，当我开始使用 HMR 时问题就来了。

由于组件在客户端是热替换的，它使用文件的“新”版本，但服务器仍然坚持使用旧版本，因为它与 webpack 捆绑在一起，因此在使用服务器渲染时，两个结果是不同的。更改组件时是否也可以更改服务器？

在阅读了一本关于 webpack 配置的小说的 SO 帖子后，我仍然无法克服这个module parse failed错误。

package.json（不是全部）

结构体

客户端/webpack.config.js

.babelrc

客户端/src/index.jsx

一直在黑暗中修改 webpack 配置，无法转换 es6。

其他 SO 帖子中反复出现的问题

1. Loaders数组必须在module属性内
2. 将presets数组添加到您的.babelrc
3. npm install --save babel-preset-whatever
4. hot-loader折旧，使用babel-preset-react-hmre
5. 装载机从右到左，从上到下装载

不知所措。

我相信我的应用程序中有一些简单的路径或类似问题。

index.html 的内容

webpackConfig：（仅限入口和输出部分）

webpack 在 public/build 文件夹中构建。现在，在配置了 webpack-hot-middleware 的快速服务器运行时，我可以在 localhost 加载索引页面，但它会为 webpack 脚本抛出 404，如下所示：

我有一个简单的配置，webpack-dev-middleware它webpack-hot-middleware使用热重载（HMR）和反应。

一切正常，除了我对代码所做的每一次更改都需要 2 3-4 秒！直到我在浏览器中看到它。难道我做错了什么 ？它应该是这样的？

我的代码相当大，我的包缩小到 841kb（200kb gzipped）是这个原因吗？代码库越大，包创建越慢？

快递服务器：

webpack.hot.config.js

当我更改代码中的某些内容时，这就是我在控制台中得到的：

更新当前问题：

似乎 webpack 热加载器出错了，因为当我运行以下 cmd:webpack 时，它可以像往常一样构建。但是当我运行 ""dev": "webpack-dev-server --color --hot -- progress && node ./server.js"".webpack 无法为我生成构建文件。

我的 webpack.config 如下：

服务器.js

我有一个用 TypeScript 编写的项目，我可以利用 Webpack Hot Reload，同时使用我的 Node.js 服务器中的库webpack-hot-middleware和webpack-dev-middleware库。

此外，我已经为我的 Stylus 代码配置了所有构建步骤（使用 Gulp 进行增量构建），它会在我的公共目录中生成一个 CSS 文件。

所以，现在我也想利用 Webpack 对 CSS 的热重载，因为我已经为我的 TypeScript 东西提供了它，但我不希望它来构建我的 CSS 文件，因为我已经有了一些很棒的东西。理想情况下，我只想让 Webpack 在每次更改时热重新加载我的单个 CSS 文件。实现这一目标的最简单和最好的方法是什么？

我当前的配置文件如下所示：

然后，我像这样使用 Webpack Hot Middleware 和 Webpack Dev Middleware：

我正在Webpack使用Hot Module Reloading. 我还在开发时使用 chrome 扩展React Developer Tools来检查反应树。当我检查页面并查看组件树时，我想查看实际组件的名称，但是，对于每个组件，名称都显示为Proxy Component.

我可以让你知道更多关于我的细节Webpack，但我什至在谷歌上努力寻找正确的东西来解决这个问题。

以下是我用于 webpack 的工具：

webpack.config.js