Javascript 如何使用webpack dev中间件将自定义变量呈现为HTML？_Javascript_Express_Webpack_Webpack Dev Middleware

Javascript 如何使用webpack dev中间件将自定义变量呈现为HTML？

javascript express webpack

Javascript 如何使用webpack dev中间件将自定义变量呈现为HTML？,javascript,express,webpack,webpack-dev-middleware,Javascript,Express,Webpack,Webpack Dev Middleware,我使用Webpack编译我的JS，然后通过express发送的模板字符串通过bundle.JS加载唯一的问题是，我找不到有关如何在使用webpack-dev-middleware查看和编译bundle.js的同时呈现自定义html的信息我的HTML将与以下代码一起发送： app.use('*', (req, res) => { res.send(` <!DOCTYPE html> <html lang="en">

我使用Webpack编译我的JS，然后通过express发送的模板字符串通过

bundle.JS

加载

唯一的问题是，我找不到有关如何在使用

webpack-dev-middleware

查看和编译

bundle.js

的同时呈现自定义html的信息

我的HTML将与以下代码一起发送：

app.use('*', (req, res) => {
    res.send(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
          <title>Title</title>
        </head>
        <body>
          <noscript>
            You need to enable JavaScript to run this app.
          </noscript>

          <div id="main"></div>

          <script type="text/javascript">window.__userData=${JSON.stringify(req.user)}</script>
          <script src="/bundle.js" type="text/javascript"></script>
        </body>
        </html>`);
});

app.use（“*”，（req，res）=>{
res.send(`
标题
您需要启用JavaScript才能运行此应用程序。
窗口。\uuuUserData=${JSON.stringify（req.user）}
`);
});

因此，我不知道如何在使用

webpack dev middleware

作为

bundle.js

时保留/使用它，因为我试图做的只是添加

app。按照上述片段之前的webpack dev middleware
使用它，尽管它不起作用，失败，bundle.js错误为错误的mime类型text/html
，因此不可执行

编辑
webpack dev middleware
的服务器端呈现选项是实验性的，不是我想要的，我不需要原始bundle.js
与html一起发送
 如果你只需要观看和编译bundle.js，为什么不干脆为此编写一个gulp任务，或者直接使用nodemon/forever？@Manticore我已经设置了webpack来完成所有编译工作，我不认为更改为gulp是一个明智的解决方案，我需要为gulp编写全新的编译脚本。Webpack的内存开发中间件/服务器速度也非常快。您的脚本在运行时会发生变化吗？我的意思是，它们真的必须由webapplication重新编译吗？@Manticore我明白你的意思，但它是用于开发的，所以只有当node env设置为development时才会运行。我要求它在响应时进行编译，所以代码库分布在许多文件中。我已经想出了一个暂时的解决方案，暂时可以满足我的需要，我将使用Webpacks节点api进行查看和编译，它有一个回调，这样我就可以告诉浏览器刷新、websocket、轮询或其他内容。@sparcut是你的解决方案（即github）？如果你只需要观看和编译bundle.js，为什么不干脆为此编写一个gulp任务，或者直接使用nodemon/forever？@Manticore我已经设置了webpack来完成所有编译工作，我不认为更改为gulp是一个明智的解决方案，我需要为gulp编写全新的编译脚本。Webpack的内存开发中间件/服务器速度也非常快。您的脚本在运行时会发生变化吗？我的意思是，它们真的必须由webapplication重新编译吗？@Manticore我明白你的意思，但它是用于开发的，所以只有当node env设置为development时才会运行。我要求它在响应时进行编译，所以代码库分布在许多文件中。我已经想出了一个暂时的解决方案，暂时可以满足我的需要，我将使用Webpacks节点api进行查看和编译，它有一个回调，这样我就可以告诉浏览器刷新、websocket、轮询或其他。@sparcut您的解决方案在什么地方可用（例如github）？