问题标签 [webpack-hmr]

使用 Webpack 热模块替换时，哪些因素会影响 Sass 文件的编译性能？

我目前有很多 Sass 文件，组织到多个目录中：

每个目录都有一个加载文件的清单，加载所有清单以及所有供应商库的入口点是main.scss.

目前，我需要从我的应用程序入口点 ( app.js) 获取此文件：

虽然 HMR 目前可以工作，但在保存更改的文件和在浏览器中更新更改之间存在很长的延迟。

我的 Sass 加载器：

开发工具配置：

哪些因素会影响 HMR 更新的速度？

I'm trying to setup a React project with react-css-modules, webpack and Hot Module Replacement. Everything is working like a charm but I can't get the CSS sourcemaps to work.

I followed this guide to make HMR work. It involves a BrowserSync setup to update the css file after Webpack writes it to disk.

I use (as suggested by react-css-modules) the ExtractTextPlugin to extract all of the css:

But if I change this to sourcemaps, as suggested here

I get the error: "root" CSS module is undefined. in my browser console.

You can find my example repo here, but here's the full webpack config I'm using for development.

How to make the sourcemap work?

我正在使用sails.js和react开发一个项目。我希望能够使用 Webpack 的热模块替换，这样我就可以编辑我的代码并立即在浏览器上进行更改。但是，我如何将它们全部连接起来似乎并不明显。

我希望能够使用$ sails lift并让它正常工作。

如果这是一个 node.js 项目，我只需将 webpack 配置为使用react-transform-hmr并webpack-dev-server从 package.json 开始（例如，如此处所述）。但是，这似乎不是一件很顺利的事情。

我看到模块webpack-hot-middleware声称能够“在没有webpack-dev-server. 但是，我不确定在 Sails > 0.10 中添加 Express 中间件配置的合适位置在哪里。

任何人都可以推荐一个设置它的好方法吗？

有时你只想从头开始。是否有可能在开发服务器上以某种方式做到这一点？

我已成功设置 HMR，一切正常，包括代理后端站点。剩下的唯一问题是，除非我完全重新加载，否则我无法在浏览器中看到实际的原始代码（ES2015）。

我错过了什么或者这是不可能的吗？我用过'cheap-module-eval-source-map'，试过了'cheap-module-inline-source-map'。甚至可以在替换模块中提供源映射，因为它们必须被评估？

我有这样一个脚本来运行内联 webpack-dev-server：

初始构建需要很长时间才能拉出所有核心包，这没关系。不幸的是，任何反应组件的任何更改都需要一段时间。有什么办法可以避免构建 react、react mdl 和其他类似于加载器排除功能的核心组件？

谢谢！

我使用此处的示例项目来设置带有热模块替换的 webpack 项目。然后我设置了一个示例主干应用程序。

[HMR] connected根据调试输出，我可以看到 HRM 正在正常加载。当文件更改时，我可以根据以下输出看到它正在重建并将更新推送到客户端：

但是屏幕不会重新加载。什么都没发生。

知道如何让它工作吗？或者 HMR 应该只与 React 一起工作？

我试图让 WebPack 与用 Typescript (.tsx) 编写的 ReactJs 组件一起工作，并利用 WebPack 的热模块替换。我找到了几个描述如何做到这一点的食谱，但它们似乎都有同样的问题——如果你的组件类上有一个在渲染方法中使用的字段，那么在代码中更改它不会正确触发 HMR ，例如

如果修改label代码中的值，则页面不会更新。我在找到的第一个入门项目中在 GitHub 上提出了一个问题，然后我又尝试了一堆，他们都有这个问题。这是一个大问题——如果你不能确定页面是否会更新，它会使整个 HMR 变得毫无意义。另外，请注意，这在原版 .jsx 组件中运行良好。

有没有人有办法使这项工作？任何方向我都会非常感激。

我有一个使用 socket.io 的 node express 应用程序。这个应用程序通过 webpack 的开发服务器代理，因为我想在客户端反应应用程序中使用热模块替换（它与节点应用程序上的套接字代码通信。）

但是，如果我添加我的socket.io听众，它会破坏热模块更换的东西。我猜是因为我的听众正在接收消息而不是 hmr 听众？

问题是，当我保存将热加载的文件时，我在 chrome 开发工具中得到以下内容并且没有热加载：

（主体400 (Bad Request)是：

有人知道如何正确设置吗？

我webpack.config.js目前是：

我已经让 HMR 正常工作，并且对我的样式所做的更改会自动在页面上更新。但是，HMR 不会更新我的样式的源映射，因此当我在检查元素时单击样式时，我只能看到第一次加载页面时出现的文件版本。

我的装载机是：

我已经配置devtool为cheap-module-eval-source-map.

我怎样才能让源地图随着更改而更新？