将 webpack 应用于全栈节点应用程序最合理的方式是什么?

2024-04-22

我已经研究 webpack 几个星期了,我已经看到了很多前端设置的例子,可能只是这是后端的设置 http://jlongster.com/Backend-Apps-with-Webpack--Part-I.

我正在尝试设置一个带有节点后端(例如express、koa、hapi等)的React应用程序,其中我需要至少一个后端转译步骤(例如babel、coffeescript等),并且我我认为使用 webpack 来保持一致性会比添加另一种构建机制(例如 gulp、grunt 等)更好。

如果我可以对后端进行更改并让服务器自动重新启动(手表风格),那就太好了。

我想知道最好的方法是否是基本上拥有两个不同的项目设置以及各自的 package.json 和 webpack.config 文件。也许将后端嵌套在server文件夹位于顶级项目文件夹中,并使用顶级 package.json 文件中的一个或多个脚本指令来控制两者。

我想我可能必须将一台服务器代理到另一台服务器以避免 CORS 问题。

寻找比我更多的 webpack 战斗测试的指导以获得一个像样的设置。

问候, 托尼.


最简单的方法是将其分为两个任务:输出到文件夹(例如“服务器”)的构建步骤,然后观察输出文件夹的更改并重新启动服务器任务。

1.构建任务

这可以与客户端构建代码位于相同的 webpack.config 中 - 您可以导出一个数组,webpack 将监视所有这些数组。 示例 webpack.config.js (上半部分用于服务器)

module.exports = [
{
  name: 'server code, output to ./server',
  entry: './index.js',
  output: {
    filename: './server/index.js'
  },
  target: 'node'
},
{
  name: 'client side, output to ./public',
  entry: './app.js',
  output: {
    filename: './public/app.js'
  }
}
];

2.观看步骤

对于手表步骤,nodemon https://github.com/remy/nodemon监视更改并重新启动。否则,您可以使用类似的方法手动将监视任务添加到 server.jsfs.watch https://nodejs.org/docs/latest/api/fs.html#fs_fs_watch_filename_options_listener or 节点监视 https://www.npmjs.com/package/node-watch.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 webpack 应用于全栈节点应用程序最合理的方式是什么? 的相关文章

随机推荐

  • MySQL 困难 - 平假名和片假名被视为相同

    我试图在 mysql 数据库上获取 su SELECT FROM edict WHERE japanese su 然而我得到了 3 个结果 斯 斯 我尝试使用 作为查询 它也返回相同的结果 SELECT FROM edict WHERE j
  • WinRT 有垃圾收集吗?

    WinRT 有垃圾收集吗 或者它是否像 COM 一样进行引用计数 I found 本文 http www itwriting com blog 4866 a few facts about microsofts new windows ru
  • 如何在将图像上传到 Firebase 之前调整图像大小?

    我之前看到过这个问题 但没有一个解决方案真正适合我的情况 除了节省一些空间之外 我还想节省从 Firebase 存储上传 下载内容的时间 由于 firebase 使用图像 uri 我想不出实现此目的的正确方法 解决方案可能是创建一个 副本
  • window.location 和 document.location 有什么区别?

    window location 和 document location 有什么区别 它们都应该引用同一个对象吗 根据 W3C 的说法 它们是相同的 实际上 为了跨浏览器安全 您应该使用window location而不是document l
  • NSFetchedResultsController 并不总是为 NSFetchedResultsChangeMove 调用 didChangeObject:atIndexPath:forChangeType:newIndexPath:

    我在用着NSFetchedResultsController with sortDescriptors请求在其中填充大量结果的表 我注意到 当发生更改将行从表格底部附近移动到顶部时 didChangeObject atIndexPath f
  • 使用 Modernizr 检测移动设备的最可靠方法是什么?

    我正在开发一个响应式网站 当用户在移动设备上浏览时 我被要求将我们网站上的任何免费电话号码交换为固定电话号码 检测用户是否在使用 Modernizr 库 或任何其他库 的移动设备上最可靠的方法是什么 我知道 Modernizr touch
  • 推送被拒绝,未能检测到 set buildpack heroku/php

    我正在尝试将我的 php 应用程序从 github 部署到 heroku 但它不起作用 我有将 php 应用程序部署到 heroku 的经验 但由于某种原因 这次我遇到了麻烦 这就是我所做的 在heroku中创建了一个应用程序 将我的 gi
  • 在 IDEA 中运行 Spark on Hive 项目期间创建事务连接工厂时出错

    我正在尝试为 Spark Streaming 项目设置一个开发环境 该项目需要将数据写入 Hive 我有一个包含 1 个主设备 2 个从设备和 1 台开发机器的集群 在 Intellij Idea 14 中编码 在 Spark shell
  • 如何从运行的应用程序中获取nodejs的源代码

    我不小心删除了nodejs应用程序的源代码 但该应用程序正在运行 那么如何从运行的应用程序中获取源代码 我希望源代码已缓存在某个目录中 我能够通过附加调试器来恢复完整文件 如TGrif https stackoverflow com use
  • Android 用 Path 画圆

    我正在尝试绘制一个圆圈的动画 在我的自定义视图中 我有 private final Paint mPaint new Paint setDither true setStyle Paint Style STROKE setStrokeCap
  • Heroku 和 @font-face - 嵌入字体不会在 Heroku 上显示

    我有几个licensed我使用 CSS 嵌入到 Rails 应用程序中的字体 font face标签 这些字体位于 Public Fonts 我的 Rails 3 应用程序中的路径并在我拉下存储库并运行的任何本地计算机上完美呈现 然而 当我
  • 如何手动删除类的实例?

    如何手动删除类的实例 Example include
  • AngularJS toArray 将对象键转换为数字

    我在项目中使用角度过滤器按页面对输出对象进行排序 问题是当我使用如下语法时 ul class catalog list key li dziecko rodzina b dziecko page b li ul
  • JAXB 将 XML 元素解组到 HashMap

    我发现很多文章描述了如何将 XML 元素序列解组到 HashMap 只要它们位于 父 元素内 但是 我无法将此与直接在根元素下的子元素一起使用 选项 1 有效
  • 如何在 C# 中将 Enter 按键解释为 Tab

    我最近刚刚开始 C 开发 当时我正在开发一个基于表单的项目 我试图在用户位于表单上并按下 Enter 键时执行 制表符 操作 我知道答案可能很简单 但我是这个领域的新手 欢迎来到 SO Tex 我相信有两种方法可以实现这一点 只需添加 选项
  • 移动光标位置?

    使用下面的代码 我想将屏幕上的光标移动到点 200 200 效果很好 但是当我 用手 移动鼠标时 光标立即返回到其原始位置 我究竟做错了什么 我在跑步XP on a KVM虚拟机运行在linux主机 这并不影响该程序的运行方式 我还尝试了各
  • 代理 golang https

    我正在努力让一个人进来https www google com https www google com使用带有身份验证的代理 我已经传递了标头参数 代理授权 但代理服务器返回 需要代理身份验证 code package main impo
  • Paper-fab 部分隐藏在应用程序工具栏后面

    我想导入一个包含paper fab并拥有paper fab重叠之间的接缝app header元素和导入的元素 在本例中 我将导入的元素称为fab element 换句话说 我只是想要paper fab 漂浮 正如广告所言 就像它应该的那样
  • Android 邮件发送验证

    我使用下面的代码将电子邮件发送到可能的电子邮件地址 当我单击 发送 按钮时 有一条 toast 消息显示 消息发送 但我的代码中没有它 它必须是默认的 我的问题是 这表示消息将被发送 但没有说明消息已发送 我知道无法检查它是否到达 但应该有
  • 将 webpack 应用于全栈节点应用程序最合理的方式是什么?

    我已经研究 webpack 几个星期了 我已经看到了很多前端设置的例子 可能只是这是后端的设置 http jlongster com Backend Apps with Webpack Part I 我正在尝试设置一个带有节点后端 例如ex