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

Question

我已经在webpack上研究了几个星期了,我已经看过许多前端设置的例子,可能只是后端的这一个设置.

我正在尝试设置一个带有节点后端的反应应用程序(例如express,koa,hapi等),其中我需要至少一个后端的转换步骤(例如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添加监视任务.