Webpack后端？

一尘不染

Webpack后端？

node.js

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

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

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

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

阅读 330

2020-07-07

共1个答案

一尘不染

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

如果我们谈论的是 react 和 node 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