将webpack应用于全栈节点应用程序的最合理方法是什么? [英] what is the most reasonable way apply webpack to a full-stack node app?

问题描述

我已经在webpack上学习了两个星期，并且我已经看到了许多前端设置的示例，也许只是

i've been studying up on webpack for a couple of weeks now, and i've seen many examples of front end setups, and probably just this one setup for a backend.

我正在尝试使用节点后端(例如express，koa，hapi等)设置React应用，其中我需要至少一个后端的转换步骤(例如babel，coffeescript等) ，我认为在其中使用webpack保持一致性而不是向混合中添加其他构建机制(例如gulp，grunt等)会更好.

i'm trying to setup a react app with a node back-end (e.g. express, koa, hapi, etc) where i would need at least one transpilation step for the back-end (e.g. babel, coffeescript, etc), and i think it would be nice to use webpack there for consistency vs adding another build mechanism to the mix (e.g. gulp, grunt, etc).

如果我可以更改后端并让服务器自动重新启动(手表样式)，那也很好.

it would also be great if i could make changes to the backend and have the server restart automatically (watch style).

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

i'm wondering if the best way to do that is to basically have two distinct project setups with their own package.json and webpack.config files. maybe nest the back-end one under a server folder in the top level project folder, and use one or more script directives in the top level package.json file to control the two.

我想我可能不得不将一台服务器代理到另一台服务器，以免发生CORS问题.

i guess i might have to proxy one server to the other to avoid CORS issues as well.

寻找比我更适合测试的Webpack战斗中的任何指导.

looking for any guidance from those more webpack battle tested than i for a decent setup.

致谢， 托尼.

推荐答案

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

Easiest way is to split this into two tasks: a build step that outputs to a folder (e.g. 'server'), then watch the output folder for changes and restart server task.

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

This can be in the same webpack.config as client building code - you can export an array and webpack will watch all of them. Example webpack.config.js (top half is for server)

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 之类的方法将监视任务手动添加到server.js中. 节点监视.

2.Watch Step

For the watch step, nodemon monitor changes and restart. Otherwise you could add a watch task to your server.js manually using something like fs.watch or node-watch.

这篇关于将webpack应用于全栈节点应用程序的最合理方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！