问题标签 [webpack-dev-middleware]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
104 浏览

javascript - Webpack 热重载不更新减速器

我正在为 express 运行 webpack-hot-reload 和 webpack-dev-server 中间件。

我的 webpack 配置:

我的 index.js

Webpack 稍后添加了更多配置:eslint、babel-loader 等。我认为它不会改变任何东西。当我更新我的一个减速器时,我仍然收到以下错误。

以下模块无法热更新:(需要完全重新加载)./client/reducers/user.js

user.js但是当我在reducer/index.js App.js 文件中重新加载组件时它工作正常,该文件也是热重新加载的。我该如何解决这个问题?

0 投票
0 回答
276 浏览

express - webpack-dev-middleware 服务/回退到公共目录

项目结构:

  1. Webpack 正在将应用程序构建到public文件夹中
  2. 同时,我在那里有一些静态资产,例如: public/assets/font-awesome-4.7.0/css/font-awesome.css

我想要的是:

  1. 我想出于开发目的运行我的express应用程序webpack-dev-middleware
  2. 我希望所有对静态资产的请求(不由 处理webpack)都从public文件夹中提供

我是如何尝试这样做的:

第一次尝试

这很好用,直到您index.htmlpublic文件夹中。如果你有它 - 将提供静态版本,而不是根据webpack-dev-middleware.

第二次尝试

然后我想 - 可能我必须express.static只用于生产案例,我删除了它。现在我无法打开/assets/font-awesome-4.7.0/css/font-awesome.css

第三次尝试(现在有效的破解)

最后我让它工作了,但我对当前的解决方案不满意。我通过扩展 webpack 配置手动将所有assets目录放入领域:webpack

但是,此方法假定需要指向他想要服务的每个静态文件webpack-dev-middleware

任何想法表示赞赏。

问候,

0 投票
1 回答
2949 浏览

webpack - webpack-hot-middleware not working with webpack-dev-middleware

I'm trying to use webpack-hot-middleware to hot reload the modules of my application. I'm using webpack-dev-middleware as well.

Here is my setup.

package.json

webpack.config.js

srcServer.js

The setup is not working. The compilation works fine when I update my code, and when I refresh my browser, the new application code is executed. However the modules aren't replaced.

Output in browser console

Network Traffic

Please help me solve this issue. Thanks!

0 投票
0 回答
317 浏览

javascript - webpack server 在多页应用中服务不同目录下不同的 index.html 文件

我正在使用 Webpack 开发一个包含多个页面的 Web 应用程序。在开发环境中,我希望 Webpack 服务器根据文件路径打开 url 中不同目录下的 index.html 文件,例如:http://localhost/index/file/to/the/directories/,然后是 index .html 文件自动提供,无需在 url 中输入 index.html。使用插件的 Webpack 服务器:webpack-dev-middleware、webpack-hot-middleware。有没有办法实现这个使命?

项目目录如下:

项目中使用了Vue.js,下面的代码进行了简化。

webpack.conf.js:

dev-server.js 如下:

现在,我启动服务器,在浏览器中打开网址:http://localhost:3000/directoryA/。我希望它会打开目录下的 index.html 文件,但事实并非如此。我怎样才能让它工作?

0 投票
0 回答
92 浏览

webpack - 如何在 wds express 中间件中访问/注入全局变量

我想在每次更改时拦截从 wds 到客户端的连接,以便在它刷新/热重新加载之前我想获取一个可以注入角度应用程序的令牌。我使用 devServer.setup() 向 webpack 开发服务器添加了一个预处理器中间件。这负责拦截连接。

但是我如何将这些值从开发服务器传递到应用程序?!

我正在考虑在 webpack.config 中使用 definePlugin。但是在那里定义的变量在 wds 服务器中是不可访问的。

有没有其他方法可以在编译期间将这些令牌传递或注入到应用程序中?!这给我带来了另一个问题,wds express 中间件是在文件编译之后还是之前调用的?!

0 投票
1 回答
961 浏览

express - Webpack HMR 在快速服务器上请求错误的路径

我正在尝试设置一个快速服务器来开发具有热重载的 React 项目,但 HMR 事物由于某种原因请求了错误的路径,我无法通过更改“publicPath”选项来修复它。即使这是我服务器静态文件的文件夹,它也会请求“公共”文件夹,因此会导致错误。如何调整配置以使 HMR 开始工作?这是我在控制台中看到的错误: 错误: 我的 Webpack 配置:

服务器.js:

文件夹结构:

0 投票
1 回答
1287 浏览

express - WebpackOptionsValidationError 与 webpack-dev-middleware

除了发布所有代码之外,我不知道如何解决这个问题,而且我已经把头发拉了几个小时了。我找不到任何关于此的信息,但我觉得我只是错过了一些东西,比如可能使用较旧版本的较旧教程。

我正在使用以下开发依赖项:

尝试运行 server.js 时收到此错误

这是我的 ES6 server.js 文件:

这是我的 webpack.base.config.js 文件:

这是 webpack.prod.config.js

0 投票
1 回答
1028 浏览

node.js - Webpack-dev-server 找不到要提供的文件

我只是从 webpack 文档中复制粘贴 webpack-dev-server + express 设置,但它不起作用,因为服务器找不到要服务的文件。这个设置有什么问题?

服务器.js

webpack.config.js

文件结构: 在此处输入图像描述

我所看到的: 在此处输入图像描述

0 投票
0 回答
249 浏览

javascript - 如何使用 webpack-dev-middleware 将自定义变量渲染成 HTML?

我使用 Webpack 编译我的 JS,然后bundle.js通过 express 发送的模板字符串加载它。

唯一的问题是,我找不到有关如何呈现自定义 html 同时还webpack-dev-middleware用于 watch 和 compile的信息bundle.js

我的 HTML 使用以下代码发送:

所以,我不知道如何在使用webpack-dev-middlewarefor时保留/使用它bundle.js,因为我试图做的只是app.use按照webpack-dev-middleware上面的代码片段之前添加,尽管它不起作用,失败并出现 bundle.js 的错误错误的 MIME 类型text/html,因此无法执行。


编辑

的服务器端渲染选项webpack-dev-middleware是实验性的,而不是我正在寻找的,我不需要 rawbundle.js与 html 一起发送。

0 投票
0 回答
377 浏览

javascript - 节点 6.11 - 未定义承诺

所以我一生都无法弄清楚为什么我的一位开发人员在她的机器上出现以下错误?该代码在我的笔记本电脑上完美运行,设置似乎完全相同。显然有些东西必须有所不同,但我还没有找到它。因此,每当我们尝试在她的机器上运行该应用程序时,我们都会收到以下错误。节点位于 6.11.4。我查看了 middleware.js 文件中的代码行,它指向了对 Promise() 方法的调用。据我所知,应该在这个版本的节点中定义正确吗?我已经卸载并重新安装了节点 2 次,我删除了项目 node_modules 并刷新了它们。还有其他想法吗?

ReferenceError:承诺未在 webpackDevMiddleware 中定义(C:\Source\Repos\NTC WEB\NTC.Web.Business\node_modules\webpack-dev-middleware\middleware.js:43:14)