express - 将 webpack 应用于全栈节点应用程序的最合理方法是什么？

Question

我已经研究了 webpack 几个星期了，我看到了很多前端设置的例子，可能只有 this one setup for a backend 。

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

如果我可以对后端进行更改并让服务器自动重新启动(观看风格)，那也会很棒。

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

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

从那些比我更经 webpack 战斗测试的人那里寻找任何指导，以获得一个体面的设置。

问候，
托尼。

Answer 1

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

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 监视器更改并重新启动。否则，您可以使用 fs.watch 或 node-watch 之类的内容手动向 server.js 添加监视任务。