node.js 后端的Webpack？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37788142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack for back-end?
提问by Erik van de Ven
I was just wondering, I started using Webpack for a new project and so far it's working fine. I almost would say I like it better than Grunt, which I used before. But now I'm quite confused how and or I should use it with my Express back-end?
我只是想知道，我开始在一个新项目中使用 Webpack，到目前为止它运行良好。我几乎会说我比之前使用的 Grunt 更喜欢它。但是现在我很困惑如何或者我应该如何将它与我的 Express 后端一起使用？
See, I'm creating one app with a front-end (ReactJS) and a back-end (ExpressJS). The app will be published on Heroku. Now it seems like I should use Webpack with ExpressJS as well to get the app up and running with one single command (front-end and back-end).
看，我正在创建一个带有前端 (ReactJS) 和后端 (ExpressJS) 的应用程序。该应用程序将在 Heroku 上发布。现在似乎我也应该将 Webpack 与 ExpressJS 一起使用，以便通过一个命令（前端和后端）启动并运行应用程序。
But the guy who wrote this blogpost http://jlongster.com/Backend-Apps-with-Webpack--Part-Iseems to use Webpack for bundling all back-end js files together, which is in my opinion really not necessary. Why should I bundle my back-end files? I think I just want to run the back-end, watch my back-end files for changes and use the rest of Webpack's power just for the front-end.
但是写这篇博文的人http://jlongster.com/Backend-Apps-with-Webpack--Part-I似乎使用 Webpack 将所有后端 js 文件捆绑在一起，在我看来这真的没有必要。为什么要捆绑我的后端文件？我想我只想运行后端，观察我的后端文件的更改，并将 Webpack 的其余功能仅用于前端。
How do you guys bundle the front-end but at the same time run the back-end nodejs part? Or is there any good reason to bundle back-end files with Webpack?
你们如何捆绑前端但同时运行后端 nodejs 部分？或者是否有充分的理由将后端文件与 Webpack 捆绑在一起？
回答by Everettss
Why to use webpack on node backend
为什么要在节点后端使用 webpack
If we are talking about reactand nodeapp you can build isomorphic react app. And if you are using importES6 Modules in react app on client side it's ok - they are bundled by webpack on the client side.
如果我们谈论的是react和nodeapp，您可以构建同构的 react app。如果您import在客户端的 react 应用程序中使用ES6 模块，那就没问题了 - 它们由客户端的 webpack 捆绑。
But the problem is on server when you are using the same react modules since node doesn't support ES6 Modules. You can use require('babel/register');in node server side but it transipile code in runtime - it's not effective. The most common way to solve this problem is pack backend by webpack (you don't need all code to be transpile by webpack - only problematic, like react stuff in this example).
但是当您使用相同的 react 模块时，问题出在服务器上，因为node 不支持 ES6 Modules。您可以require('babel/register');在节点服务器端使用，但它在运行时转换代码 - 它无效。解决此问题的最常见方法是通过 webpack 打包后端（您不需要所有代码都由 webpack 转译 - 只有有问题的，例如本示例中的反应内容）。
The same goes with JSX.
这同样与JSX。
Bundling frontend and backend at the same time
同时捆绑前端和后端
Your webpack config can have to configs in array: one for frontend and second for backend:
您的 webpack 配置可能必须在数组中进行配置：一个用于前端，第二个用于后端：
webpack.config.js
webpack.config.js
const common = {
module: {
loaders: [ /* common loaders */ ]
},
plugins: [ /* common plugins */ ],
resolve: {
extensions: ['', '.js', '.jsx'] // common extensions
}
// other plugins, postcss config etc. common for frontend and backend
};
const frontend = {
entry: [
'frontend.js'
],
output: {
filename: 'frontend-output.js'
}
// other loaders, plugins etc. specific for frontend
};
const backend = {
entry: [
'backend.js'
],
output: {
filename: 'backend-output.js'
},
target: 'node',
externals: // specify for example node_modules to be not bundled
// other loaders, plugins etc. specific for backend
};
module.exports = [
Object.assign({} , common, frontend),
Object.assign({} , common, backend)
];
If you start this config with webpack --watchit will in parallel build your two files. When you edit frontend specific code only frontend-output.jswill be generated, the same is for backend-output.js. The best part is when you edit isomorphic react part - webpack will build both files at once.
如果你用webpack --watch它启动这个配置，它将并行构建你的两个文件。当您编辑前端时，只会frontend-output.js生成特定的代码，对于backend-output.js. 最好的部分是当您编辑同构反应部分时 - webpack 将同时构建两个文件。
You can find in this tutorialexplanation when to use webpack for node (in chapter 4).
您可以在本教程中找到何时为 node 使用 webpack（在第 4 章中）。
回答by erandros
You can use webpack-node-externals, from the readme:
您可以使用自述文件中的 webpack-node-externals：
npm install webpack-node-externals --save-dev
In your webpack.config.js:
在你的 webpack.config.js 中：
var nodeExternals = require('webpack-node-externals');
module.exports = {
...
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
...
};
