后端的Webpack? [英] Webpack for back-end?
问题描述
我只是想知道，我开始在一个新项目中使用 Webpack，到目前为止它运行良好.我几乎会说我比之前使用的 Grunt 更喜欢它.但是现在我很困惑如何或者应该将它与我的 Express 后端一起使用?
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?
看，我正在创建一个具有前端 (ReactJS) 和后端 (ExpressJS) 的应用程序.该应用程序将在 Heroku 上发布.现在看来，我也应该将 Webpack 与 ExpressJS 结合使用，以便通过一个命令(前端和后端)启动并运行应用程序.
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).
但是写这篇博文的人http://jlongster.com/Backend-Apps-with-Webpack--Part-I 似乎使用Webpack 将所有后端js 文件捆绑在一起，我认为这确实没有必要.为什么要捆绑我的后端文件?我想我只想运行后端，观察我的后端文件的变化，并将 Webpack 的其余功能仅用于前端.
But the guy who wrote this blogpost http://jlongster.com/Backend-Apps-with-Webpack--Part-I seems 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.
你们如何捆绑前端，同时运行后端 nodejs 部分?或者是否有充分的理由将后端文件与 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?
推荐答案
为什么要在节点后端使用 webpack
如果我们谈论的是 react 和 node 应用程序，您可以构建 同构反应应用.如果您在客户端的 react 应用程序中使用 import ES6 模块，那没关系 - 它们由客户端的 webpack 捆绑.
Why to use webpack on node backend
If we are talking about react and node app you can build isomorphic react app. And if you are using import ES6 Modules in react app on client side it's ok - they are bundled by webpack on the client side.
但是当您使用相同的反应模块时，问题出在服务器上，因为 节点不支持 ES6 模块.您可以在节点服务器端使用 require('babel/register'); 但它在运行时转换代码 - 它无效.解决这个问题最常见的方法是通过 webpack 打包后端(你不需要所有的代码都被 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).
JSX 也是如此.
您的 webpack 配置可能必须在数组中进行配置:一个用于前端，第二个用于后端:
Your webpack config can have to configs in array: one for frontend and second for backend:
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)
];
如果您使用 webpack --watch 启动此配置，它将并行构建您的两个文件.当您编辑前端特定代码时，只会生成 frontend-output.js，backend-output.js 也是如此.最好的部分是当你编辑同构的 react 部分时 - webpack 会同时构建这两个文件.
If you start this config with webpack --watch it will in parallel build your two files. When you edit frontend specific code only frontend-output.js will 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 的说明节点(在第 4 章中).
You can find in this tutorial explanation when to use webpack for node (in chapter 4).
这篇关于后端的Webpack?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
