一尘不染

Webpack后端?

node.js

我只是想知道,我开始将Webpack用于一个新项目,到目前为止一切正常。我几乎会说我比以前使用过的Grunt更喜欢它。但是现在我很困惑如何以及如何在Express
Express后端上使用它?

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

但是写此博客文章http://jlong​​ster.com/Backend-Apps-with-Webpack--Part-
I的人似乎使用Webpack将所有后端js文件捆绑在一起,在我看来,这确实没有必要。为什么要捆绑我的后端文件?我想我只想运行后端,观察后端文件中的更改,并将Webpack的其余功能仅用于前端。

你们如何捆绑前端,但同时运行后端nodejs部分?还是有充分的理由将后端文件与Webpack捆绑在一起?


阅读 330

收藏
2020-07-07

共1个答案

一尘不染

为什么在节点后端上使用Webpack

如果我们谈论的是 reactnode app,那么可以构建同构的react
app
。而且,如果您 import 在客户端的react app 中使用ES6模块,也可以-
它们由客户端的webpack捆绑在一起。

但是问题是在服务器上,当您使用相同的react模块时,因为node不支持ES6模块。您可以require('babel/register');在节点服务器端使用,但是它会在运行时传递代码-
无效。解决此问题的最常见方法是通过webpack打包后端(您不需要通过webpack转换所有代码-只是有问题的,例如本示例中的react东西)。

这同样与 JSX

同时捆绑前端和后端

您的webpack配置可能必须在数组中进行配置:一个用于前端,第二个用于后端:

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。最好的部分是当您编辑同构反应部分时-Webpack会立即构建两个文件。

您可以在本教程中找到何时对节点使用webpack的说明(第4章)。

2020-07-07