Webpack的后端?

我只是想知道,我开始使用Webpack进行一个新的项目,到目前为止工作正常。 我几乎会说我喜欢它比我之前使用的Grunt更好。 但现在我很困惑,我应该如何和我的Express后端使用它?

看,我正在创build一个前端(ReactJS)和后端(ExpressJS)的应用程序。 该应用程序将在Heroku上发布。 现在看起来我也应该使用ExpressJS的Webpack,通过一个命令(前端和后端)启动和运行应用程序。

但是写这篇博文的人似乎使用Webpack将所有的后端js文件捆绑在一起,这在我看来确实没有必要。 为什么要捆绑我的后端文件? 我想我只是想运行后端,观察我的后端文件进行更改,并将剩下的Webpackfunction用于前端。

你们如何捆绑前端,但同时运行后端nodejs部分? 还是有什么好的理由来捆绑Webpack的后端文件?

为什么要在节点后端使用webpack

如果我们正在谈论反应节点的应用程序,你可以build立同构反应的应用程序 。 如果你在客户端的应用程序中使用import ES6模块,那就没问题 – 它们被客户端的webpack捆绑在一起。

但是由于节点不支持ES6模块,因此在使用相同的反应模块时,问题出在服务器上。 你可以使用require('babel/register'); 在节点服务器端,但它在运行时传输代码 – 这是无效的。 解决这个问题的最常用的方法是用webpack打包后端(你不需要所有的代码都是由webpack进行传输 – 只有问题,比如在这个例子中反应的东西)。

JSX也一样

同时绑定前端和后端

您的webpackconfiguration可以在数组中configuration:一个用于前端,另一个用于后端:

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启动这个configurationwebpack --watch将会并行地build立你的两个文件。 当您编辑前端特定代码时,只会生成frontend-output.js ,对于backend-output.js 。 最好的部分是当你编辑同构反应部分 – webpack将一次构build两个文件。

您可以在本教程中find解释何时使用节点的webpack(第4章)。