问题标签 [webpack-dev-middleware]

我正在尝试为一个项目制作一个快速的样板，但在重新加载页面时遇到了一个问题。

我的代码中有这段代码app.js：

当我启动页面时，我可以看到H1添加到 DOM 中，但是当我进行更改时（例如Greetingsto Marie的参数），它不会更新当前页面，而是添加一个新元素等等。

所以我在我的 DOM 中有：

代替

我真的不知道热重载的幕后发生了什么，但似乎它并没有更新整个页面！

任何帮助将不胜感激！

顺便说一句，这是我的 webpack.config 文件：

演示问题的示例 repo 在这里。

我正在尝试设置 webpack 开发服务器，以便：

1. 请求/由public/landing.html（静态登录页面）提供服务
2. 我的 React 应用程序处理对任何其他内容的请求

使用create-react-app, 并基于webpack-dev-server's options，我设置webpackDevServer.config.js如下：

historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebookincubator/create-react-app/issues/387. disableDotRule: true, rewrites: [ // shows views/landing.html as the landing page { from: /^\/$/, to: 'landing.html' }, // shows views/subpage.html for all routes starting with /subpage { from: /^\/subpage/, to: 'subpage.html' }, // shows views/404.html on all other pages { from: /./, to: '404.html' }, ], },

当我启动 webpack 时，我看到的是：

• 请求/subpage被正确路由到subpage.html
• 请求/foo正确路由到404.html。最终，这些将由我的 React 应用程序处理。
• 请求/被错误地路由到我的 React 应用程序。

我怎样才能landing.html回应请求/？

我们有使用 grunt 编写的 lecasy 应用程序。它还使用了这个东西https://github.com/gruntjs/grunt-contrib-connect这使我们可以使用中间件数组，以便我们现在可以像这样添加或取消转换中间件：

现在我们正在将我们的项目迁移到 webpack 并尝试使用 webpack 实现相同的行为：

我正在尝试使用热模块替换设置 webpack，并使用重写模块通过 IIS 中的反向代理访问它

我的简单重写规则：

即重写localhost/test/__webpack_hmr -> localhost:8080/__webpack_hmr

还有我的 webpack 配置：

我在端口 8080 上运行 webpack 服务器，如果我在http://localhost:8080访问该站点或在浏览器中手动输入http://localhost:8080/__webpack_hmr一切正常。

但是，如果我尝试通过http://localhost/test访问该站点或在浏览器中手动输入http://localhost/test/__webpack_hmr，则 /test 请求按预期工作，但http://localhost/test/ __webpack_hmr请求正在通过并保持打开状态，但没有数据流回。

我已经验证反向代理正在工作。为了让它工作，我需要使用 webpack 中的一些选项吗？

我是 Node JS 的新手。我正在使用 webpack-hot-middleware 创建一个带有热重载的后端 API 服务器。我尝试使用 webpack-dev-middleware 将服务器脚本（index.js）加载到内存并执行该 javascrip t 文件。

这是我的代码：链接

我发现我的代码可以成功地进行热重载，但是我无法加载服务器脚本（index.js）并启动我的 API 服务器。由于某些原因，我想使用 webpack-dev-middleware 而不是 webpack 开发服务器。

这是我的文件结构：

我找到了大量关于如何在呈现 HTML 的前端或后端服务器上执行此操作的教程，但我需要启动我的 index.js。

所以，我的问题是如何加载从 webpack-dev-middleware 生成的 js 文件并启动该 js 文件。

以下是我尝试的：

在 webpack.devserver.config.js 中：

结果：在 index.js 上更改某些内容后，代码似乎已成功重新加载，但是当我访问 /api/hi API 时看不到更改。

Vue提供了一个HackerNews示例来演示如何进行服务器端渲染以及热模块重新加载支持。

基本上，客户端和服务器端代码被分成两个文件：编译成两个 json 文件entry-client.js和entry-server.js. 然后为每个编写两个 webpack 配置，并将它们编译成 JSON 文件。

然后，有用于处理两个 JSON 并提供内容的server.js服务器vue-server-renderer。

至于热模块重新加载，文件夹中有一个名为 setup-dev-server.js 的配置，用于build处理任务并将编译的内容存储在webpack-dev-middleware的文件系统中。

只要您只更改及其关联的模块，此设置就可以完美entry-client.js运行entry-server.js。但是，我想要做的是添加一个仅server.js与热模块重新加载支持一起使用的新模块。

一个例子是添加一个 RESTful API entry-api.js，：

并在server.js：

我设法编写了一个用于编译的 webpack 配置，entry-api.js它非常适合生产构建。至于热模块重新加载，对相关代码的任何更改都会entry-api.js触发重新编译，但这些更改永远不会实时反映。有人能告诉我我应该做些什么改变set-dev-server.js才能让它发挥作用吗？

参考：

我的 webpack 配置entry-api.js：

我还在GitHub 上打开了一个问题，我怀疑它会得到任何回应。

我已按照 webpack 4.1 文档中的建议，使用 webpack-merge 将我的 webpack 配置文件拆分为 3 个单独的文件，以将它们合并在一起。

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

我遇到的问题是我正在使用webpack-dev-middleware和webpack-hot-middleware，我只需要在 webpack.dev.js 中使用它，但入口点需要使用

这在我的 webpack.common.js 文件中。这意味着 prod 和 dev 将在其入口点中包含“webpack-hot-middleware/client”。使用带有 webpack-merge 的设置，我如何才能在开发点而不是产品中仅使用“webpack-hot-middleware/client” ？

我尝试添加与此相同的条目。

然后在 webpack.dev 条目中： [ ${ROOT_DIR}/js/index, 'webpack-hot-middleware/client' ],

但这只会导致重复错误。

在将 webpack-dev-middle 与 express 服务器一起使用时，我想使用 webpack-hot-middleware 对提取的 css 文件进行工作（热重载）。

它适用于 webpack-dev-server。但我想将它与快递一起使用。

服务器.js

webpack.config.js

其他一切正常，当我构建时，我从 scss 获取 css 文件。我相信style-loader当它没有被提取但当我尝试它时似乎没有做任何事情时，这就是它的工作原理。

我使用 extract-text-webpack-plugin 找到了很多答案，但据我所知，这不适用于 webpack 4...所以我将 extract-loader 与 file-loader 一起使用。

webpack-dev-middleware我有一个使用和运行我的应用程序的快速服务器webpack-dev-server。

更新到 webpack@4.1.1 后，我收到以下警告

由于我没有直接从 CLI 运行 webpack，如何设置 --mode 选项？

背景

假设你有一个 ES2015/ES6 组件，它有一个函数作为默认导出：

组件.js

将其包含在的应用程序：

应用程序.js

还有一个使用webpack-dev-middleware的 Node.js/Express 服务器，在和 serve 上运行 Webpack（带有 Babel）app.js，还包括component.js：

服务器.js

问题

您将如何component.js在两者server.js以及 webpacked 中使用app.js？

问题

按原样，该组件在 中运行良好，但在尝试执行时在节点控制台中app.js抛出 a 。SyntaxError: Unexpected token exportconst component = require("./component")

由于 Babel 仅通过 Webpack 运行，并且通过原始组件而不是捆绑/转译的组件server.js进行访问component.js，因此我们得到了错误。

我想一个解决方案是运行 Babel 两次：在server.js启动之前在组件上运行一次，然后在 Webpack 中运行一次，但这似乎非常不优雅和低效。