问题标签 [webpack-dev-middleware]

webpack 新手，我无法正确设置使用 React-Router 和 Webpack-Dev-Server。

我想以这种方式设置的原因是利用webpack-hot-middleware每次我更改代码中的某些内容时重新加载页面。

虽然我能够正确呈现 IndexPage，但如果我在 URL 中的不同入口点手动键入，webpack 会认为我正在检索其他地方，实际上它位于 React-Router 中。

这是当前设置（或Github 存储库）：

webpack.config

webpack 的 server.js

src/client/index.js

包.json

我已按照本教程将 Angular 和 ASP.NET Core 一起运行。初始构建工作正常，但更新角度包后，我在应用程序启动时收到以下错误（我还必须在此过程中重新安装 nodejs，不确定这是否相关）：

错误在以下行：

错误本身并没有为我提供任何有用的信息来追踪问题。

我得到一个：

System.AggregateException => Count = 错误 CS0103：当前上下文中不存在名称“InnerExceptionCount”

在 InnerExceptions 下，它列出了以下错误：

System.ComponentModel.Win32Exception：系统在 Microsoft 的 System.Diagnostics.Process.Start() 的 System.Diagnostics.Process.Start(ProcessStartInfo startInfo) 中找不到在 System.Diagnostics.Process.StartCore(ProcessStartInfo startInfo) 指定的文件。 AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.LaunchNodeProcess(ProcessStartInfo startInfo) at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance..ctor(String entryPointScript, String projectPath, String[] watchFileExtensions, String commandLineArguments, ILogger nodeOutputLogger, IDictionary2 environmentVars, Int32 invocationTimeoutMilliseconds, Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance..ctor(String projectPath,String[] watchFileExtensions, ILogger nodeInstanceOutputLogger, IDictionary2 environmentVars, Int32 invocationTimeoutMilliseconds, Boolean launchWithDebugging, Int32 debuggingPort, Int32 port) 在 Microsoft.AspNetCore.NodeServices.NodeServicesFactory.CreateNodeInstance(NodeServicesOptions options) 在 Microsoft.AspNetCore.NodeServices.NodeServicesFactory.<>c__DisplayClass0_0。 b__0() 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.CreateNewNodeInstance() 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.GetOrCreateCurrentNodeInstance() 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.d__10`1.MoveNext()}AspNetCore.NodeServices.NodeServicesFactory.CreateNodeInstance(NodeServicesOptions options) 在 Microsoft.AspNetCore.NodeServices.NodeServicesFactory.<>c__DisplayClass0_0.b__0() 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.CreateNewNodeInstance() 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.GetOrCreateCurrentNodeInstance() ) 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.d__10`1.MoveNext()}AspNetCore.NodeServices.NodeServicesFactory.CreateNodeInstance(NodeServicesOptions options) 在 Microsoft.AspNetCore.NodeServices.NodeServicesFactory.<>c__DisplayClass0_0.b__0() 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.CreateNewNodeInstance() 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.GetOrCreateCurrentNodeInstance() ) 在 Microsoft.AspNetCore.NodeServices.NodeServicesImpl.d__10`1.MoveNext()}d__10`1.MoveNext()}d__10`1.MoveNext()}

如果有人能指出我从错误中获取更多信息的方向会有所帮助。

我有一个express我在我的应用程序中使用的 API，所以我正在使用webpack-dev-middleware和webpack-hot-middleware.

我试图弄清楚当我通过 APIwebpack --color使用时如何获得该选项。webpack

这就是我现在所拥有的：

我目前正在使用webpack@2.2.0-rc.3.

我正在使用 webpack 2，与webpack-dev-middleware

相关服务器代码：

在初始构建时（无论是webpack从控制台使用，还是在第一次运行我的服务器时），整个过程大约需要 2000 毫秒。更改.js文件根本不需要很长时间（<200ms），但更改手写笔文件需要很长时间（>90s）。如果我对手写笔进行更改然后手动触发重建webpack它真的很快，但理想情况下我希望手表发挥它的魔力并让我的 css 快速重新加载到位......

任何想法为什么使用手写笔进行重建需要这么长时间，或者我如何调试问题？

我开始使用开发服务器端渲染应用程序webpack的环境。我对每个 webpack 包在开发和生产（运行时）环境中的作用感到非常困惑。node/expressReactJSreact-router

以下是我的理解总结：

webpack: 是一个包，一种将 Web 应用程序的不同部分连接在一起并捆绑在一个 .js 文件中的工具（通常是 .js 文件bundle.js）。然后将结果文件提供给应用程序加载的 prod 环境，并包含运行代码所需的所有组件。功能包括收缩代码、缩小等。

webpack-dev-server: 是一个提供服务器来处理网站文件的包。它还bundle.js从客户端组件构建单个 .js 文件 ( )，但在内存中提供它。它还具有选项 ( -hot) 来监视所有构建文件并在代码更改时在内存中构建一个新包。服务器直接在浏览器中提供服务（例如：）http:/localhost:8080/webpack-dev-server/whatever。内存加载、热处理和浏览器服务的结合让用户可以在代码更改时在浏览器上更新应用程序，非常适合开发环境。

如果我对上面的文字有疑问，我真的不确定下面的内容，所以如果有必要请告诉我

使用webpack-dev-serverwith时的一个常见问题node/express是它webpack-dev-server是一个服务器，就像node/express. 这使得这个环境很难同时运行客户端和一些节点/快速代码（API 等）。注意：这是我所面临的，但很高兴能更详细地理解为什么会发生这种情况......

webpack-dev-middleware：这是一个与webpack-dev-server（内存捆绑，热重载）功能相同的中间件，但格式可以注入到server/express应用程序中。这样，您就拥有了一种webpack-dev-server位于节点服务器内部的服务器（即）。 哎呀：这是一个疯狂的梦想？？？这篇文章如何解决开发和生产等式并使生活更简单

webpack-hot-middleware：这个...卡在这里...在寻找时发现了这块webpack-dev-middleware...不知道如何使用它。

尾注：对不起，有任何错误的想法。我真的需要帮助才能在复杂的环境中理解这些变体。如果方便，请添加更多包/数据来构建整个场景。

我有一个使用 webpack-dev-middleware 的快速服务器。

如果您从 cli 运行 webpack-dev-server ，则有一个“进度”选项会导致进度显示在控制台上。这是一个很好的功能，我在使用中间件时也想要它。

这是可以实现的还是仅适用于独立的开发服务器？

我搜索了文档，但找不到与此相关的任何内容。

我在我的开发环境中将 express 与 webpack-dev-middleware 和 webpack-hot-middleware 一起使用。我构建了一个与 GitHub 类似的存储/DFS 模块。您粘贴一个 URL，它会打开一个文件夹或文件。现在我遇到的问题是，当我在末尾粘贴一个包含文件扩展名的 URL 时，如 (/storage/folder1/folder2/file.py) 我得到 'Cannot GET /storage/folder1/folder2/file.py '。

这是一个 VUE 应用程序，对于路由，我使用的是 vue-router。VUE app中配置的路径为：

用作 VUE 应用程序的模板：https ://admin.vuebulma.com/#/

关于如何解决这个问题的任何建议？

我已经用sails 配置了webpack-dev- middleware。webpackpublicPath中的配置设置为/static/. Webpack 构建时bundle.js没有错误，但在localhost:3000/static/bundle.js.

如何注入捆绑包？我需要为帆做些什么具体的事情吗？

所以我使用 webpack dev 中间件如下：

但是，由于某种原因，我没有实时重新加载。我也没有获得覆盖功能。我正在使用此设置，因为我使用的是 webpackhtmlplugin。

我觉得我在这里错过了一个简单的概念:(有什么想法吗？

我已经使用这些包来遵守 webpack HMR：

• webpack@2.2.1
• webpack-dev-middleware@1.10.1
• webpack-hot-middleware@2.17.1

webpack 统计配置：

使用 webpack-dev-middleware

每次我运行 command 时npm run dev，控制台都会打印资产信息，例如：

但是当我使用 webpack HMR 重建我更改的文件时，控制台将打印所有资产信息，包括 emmited 文件和不相关文件，就像：

我只想知道我更改过的文件，而不关心无关的文件信息。

那么，你能帮我让 webpack 只打印这些 emmited 文件信息吗？