Webpack 用于后端？

我只是想知道，我开始在一个新项目中使用 Webpack，到目前为止它运行良好。我几乎可以说我比我之前用过的 Grunt 更喜欢它。但现在我很困惑如何和/或应该将它与我的 Express 后端一起使用？

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

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

你们如何捆绑前端但同时运行后端 Nodejs 部分？或者有什么充分的理由将后端文件与 Webpack 捆绑在一起？

为什么在node后端使用webpack

如果我们谈论的是react and node您可以构建的应用程序同构反应应用程序 https://www.smashingmagazine.com/2015/04/react-to-the-future-with-isomorphic-apps/。如果你正在使用import客户端 React 应用程序中的 ES6 模块没问题 - 它们由客户端的 webpack 捆绑。

但是当您使用相同的反应模块时，问题出在服务器上节点不支持 ES6 模块 https://medium.com/@nodesource/es-modules-and-node-js-hard-choices-2b6995e4d491#.a2f8jcbks。您可以使用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。最好的部分是当您编辑同构 React 部分时 - webpack 将立即构建两个文件。

你可以在这个找到tutorial https://michaljanaszek.com/blog/combine-pwa-and-isomorphic-rendering解释何时对节点使用 webpack（第 4 章）。