我只是想知道，我开始使用Webpack进行一个新项目，到目前为止它工作正常。我几乎会说我喜欢它比我之前使用的Grunt更好。但是现在我很困惑我应该如何将它用于我的Express后端？
请参阅我正在创建一个带前端应用程序的应用程序（ ReactJS）和后端（ExpressJS）。该应用程序将在Heroku上发布。现在看起来我应该在ExpressJS上使用Webpack，并通过一个命令（前端和后端）启动并运行该应用。
但是写这篇博文的人似乎使用Webpack将所有后端js文件捆绑在一起，这在我看来确实没有必要。为什么要捆绑我的后端文件？我想我只是想运行后端，观看我的后端文件以进行更改，并将剩余的Webpack功能用于前端。
你们是否捆绑了前端，但同时运行后端nodejs部分？或者是否有任何理由将后端文件与Webpack捆绑在一起？
解决方案
如果我们正在讨论 react 和节点应用程序，您可以构建。如果您在客户端应用程序中使用 import ES6模块，则可以 - 它们在客户端由webpack捆绑在一起。
但是，当你使用相同的反应模块时，问题出现在服务器上，因为解释何时使用节点的webpack（第4章）。
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?
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).
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.
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?
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.
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).
The same goes with JSX.
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)
];
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.
You can find in this tutorial explanation when to use webpack for node (in chapter 4).
这篇关于Webpack的后端？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！