将 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。