问题标签 [webpack-hot-middleware]

我有一个使用 webpack 4 构建的 React 项目。对于服务器端渲染，我构建了 express 后端并使用webpack-dev-middleware,webpack-hot-middleware和webpack-hot-server-middleware. 此外，还有用于客户端和节点构建版本的 webpack 配置。但是，如果仅使用 webpack 命令单独启动，一切正常，但如果我想启动服务器，它会抛出以下结果：

bootstrap.scss 导入到 index.js 的 app 文件夹中，代码如下：

以下代码来自服务器的 webpack 配置：

这是服务器开发配置：

问题是：第一个代码块中出现错误的原因是什么以及如何解决？

我正在尝试使用webpack-dev-middlewarewebpack-hot-middle-ware、express 和 react 启动并运行我的应用程序。但是当我启动我的代码时，系统没有给我 [hash].hot-update.json 文件。当我更改代码中的某些内容时，系统会重建并提供此类文件，但文件名中的哈希值错误。这是我的代码：

开发服务器的入口点：

我的 webpack.config.js 文件：

我的 package.json 文件：

和我的 server.js 文件：

还需要有关服务器端渲染的任何帮助。

简短的摘要

由于 dev-middleware 依赖于内存中的文件，是否不可能将 htmlwebpackplugin 功能与 webpack-dev-middleware 结合起来？本文底部的脚本输出截图。因为我选择在我的生产配置中实现缓存散列文件名，所以我似乎不能再使用 dev-middleware。

我的设置

我的 webpack 实例有 2 个主要配置。一种用于开发（带有热重载），一种用于生产。我利用 webpack-merge 创建了一个 common.config，我最终将提取两个配置之间的共性（现在它相当空白）。在应用程序设置方面，我有一个在 Python 中单独运行的 API。

问题

在我的生产配置中，我使用 splitchunks 进行供应商/捆绑拆分以及一些最小化。它工作得很好。但是，当我尝试运行我的开发环境时，虽然它正在根据终端创建适当的开发包[即没有散列]，但无法找到 index.html 文件（可能是因为 webpack-dev-中间件在内存中寻找东西）。结果，我看不到我的开发环境，也看不到任何热重载更改？以前我会使用 npm run build:production 生成所有捆绑文件，然后使用 NPM start。我想 dev-middleware 会将它的内存版本的 bundle.js 更改覆盖在我磁盘上的文件上，但是现在我在 prod 上使用散列文件名，我真的不能再这样做了吗？

Package.json 脚本

server.js 的相关部分

common.config.js

dev.config.js

这是使用 npm run build:production 后我的 index.html 文件的示例。如您所见，index.html 的内存版本可能无法再与散列文件名一起使用？

其他注意事项：

• 在最新版本的 webpack 4 上。
• 我的生产版本工作正常

非常感谢任何帮助。

更新：我已将 rimraf dist 换成干净的 webpack 插件并将其移至我的 common.config。这样，在每次构建时，它都会在生成 index.html 之前进行清理。但是，我注意到当我使用 npm start 时，终端中的输出显示文件已发出......我在任何地方都找不到它们？在调查了 webpack-dev-middleware 之后，似乎他们将东西存储在内存中. 这大概是核心问题。如果 htmlwebpack 插件在内存中或者我可能需要维护一个单独的 index.html 文件，我如何将它与 dev-middleware 之类的东西联系在一起？我猜这个流程之前工作的原因是因为我对 prod 和 dev 都有 bundle.js 的静态名称，所以内存版本没有问题。现在这些名称是从 prod 版本中散列的......它不知道该怎么做？

您好，我想将 webpack 与 express 和 webpack-dev-middleware 以及热模块替换一起使用。我收到以下消息，但无论如何浏览器都不会刷新。

我已经坚持了好几天了，所以如果有人能帮助我，那就太棒了。我正在提供我的服务器和 webpack 配置文件。非常感谢您提前。

[HMR] 已连接

app.bundle-26838b.js:1 [HMR] 包在 61968 毫秒内重建

我得到了这个，但浏览器没有刷新。

服务器.js

webpack.config.js

我正在使用 webpack-hot-middleware 为 express 应用程序中的 javascript ui 脚本进行热模块替换。每当我启动服务器时，我都会收到此错误：找不到模块：错误：无法解析 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'。

这是我在网络服务器中编译的 webpack 配置：

这是服务器代码中的编译：

我已经在使用webpackDevMiddleware&的快速应用程序上添加了热重载，webpackHotMiddleware但我注意到这 2 个中间件减慢了应用程序的速度，我认为第一次启动应该更慢是正常的，因为我需要编译所有内容，但在编译文件之后是为他们服务很重要....没有这两个中间件的相同代码响应非常快，添加它们后速度变慢了很多...我可以在 chrome 控制台上等待一些文件等待几秒钟...我不;t认为这与任何错误的 webpack 配置有关，因为问题是在编译之后，只是每次我重新加载页面都需要 20 秒才能加载......有什么建议吗？

我的webpack-hot-middleware有问题，我不确定自己做错了什么。

总结：每次我运行命令node./ devwebpack 都会运行并开始监控更改。这部分工作得很好。

当我更改src / assets / js / index.js文件时，它会在应用更改后刷新页面。但是对于我的src / assets / styles / index.scss文件，只有当该更改是我在 webpack 开始监控后所做的第一个更改时。

如果我运行node./ dev并更改index.scss，则在输出中进行更改后浏览器会刷新。第二次，浏览器不刷新。如果我改变 myindex.js并尝试改变，也会发生同样的情况index.scss。

在我的 Chrome 控制台选项卡中，它显示以下消息（当页面未上传时）：

这是我的工作代码示例：

开发者.js

webpack.dev.conf.js

**尝试将模式选项添加到 webpack 配置时出现错误我需要通过查看此答案 github.com/webpack-contrib/webpack-hot-middleware/issues/来配置 {mode:'developement'} 以启用 hmp **

WebpackOptionsValidationError：配置对象无效。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- 配置具有未知属性“模式”。这些属性是有效的：object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance? , plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } 对于错别字：请更正。对于加载器选项：webpack 2 不再允许配置中的自定义属性。应该更新加载器以允许通过 module.rules 中的加载器选项传递选项。在加载器更新之前，可以使用 LoaderOptionsPlugin 将这些选项传递给加载器： plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // 可能仅适用于某些模块 options: { mode: ... } }) ] 在 webpack (C:\Users\asdf\WebstormProjects\node_modules\webpack\lib\webpack.js:19:9) 在 Object. （在 Module._compile (internal/modules/cjs/loader.js:689:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) 在 Module.load（内部/modules/cjs/loader.js:599:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:538:12) 在 Function.Module._load (internal/modules/cjs/loader.js:530:3 ) 在 Function.Module 中。

所以我对 webpack 还很陌生，在过去的一周里，我一直在努力将它实施到我的项目中，我使用了这个指南：https ://medium.com/@binyamin/creating-a-node-express-webpack -app-with-dev-and-prod-builds-a4962ce51334 我设法让大部分东西工作，但不能让 HMR 开始工作。感谢您的帮助，在此先感谢您。

这是我的 webpack.dev.config.js 文件：

我的 server-dev.js 文件：

index.js 文件：

webpack.server.config.js 文件：

和我的文件结构：

和我的 package.json 脚本：

我有

在我的webpack.config.js. 配置在 webpack 启动时读取一次，如果我更改 development.json 中的任何内容，我需要停止 webpack 进程并再次运行它。

有没有办法跟踪 webpack 的文件更改？我在来源中没有看到任何内容