我只是想知道，我开始将Webpack用于一个新项目，到目前为止一切正常。我几乎会说我比以前使用过的Grunt更喜欢它。但是现在我很困惑如何以及如何在Express Express后端上使用它？
看，我正在创建一个带有前端（ReactJS）和后端（ExpressJS）的应用程序。该应用程序将在Heroku上发布。现在看来，我也应该将Webpack与ExpressJS一起使用，以通过一个命令（前端和后端）启动并运行该应用程序。
但是写此博客文章http://jlongster.com/Backend-Apps-with-Webpack--Part-I的人似乎使用Webpack将所有后端js文件捆绑在一起，在我看来，这确实没有必要。为什么要捆绑我的后端文件？我想我只想运行后端，观察后端文件中的更改，并将Webpack的其余功能仅用于前端。
你们如何捆绑前端，但同时运行后端nodejs部分？还是有充分的理由将后端文件与Webpack捆绑在一起？
Answers:
如果我们谈论的是react和node app，那么可以构建同构的react app。而且，如果您import在客户端的react app中使用ES6模块，也可以-它们由客户端的webpack捆绑在一起。
但是问题出在服务器上，因为您的节点不支持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章）。
browserify，grunt-nodemon并且grunt-contrib-watch只需一个命令即可运行前端和后端代码命令。同时，让观察者了解前端和后端代码。我遇到的问题是，使用webpack很难，而只有一个带有Express和React文件的应用程序文件夹（带有子文件夹）。我需要webpack只观看后端代码，并观看和捆绑前端。我正在经历这并不容易。
// specify for example node_modules to be not bundled这是否意味着这应该是每个模块的数组node_modules，而不是后端代码的依赖关系..或它们的依赖关系等等的依赖关系。等等。这是不对的。.您可以进一步解释吗？谢谢
externals应该指定特定于节点环境的模块，例如fs（webpack将无法编译该模块）。您可以在此处阅读有关内容webpack.js.org/configuration/externals在大多数情况下，此插件npmjs.com/package/webpack-node-externals将覆盖所有有问题的节点模块。像这样使用它：externals: [require('webpack-node-externals')()]。
我仅可以修改几个方面，即可将webpack用于后端代码。
import）import仅在节点上具有实验支持（至少从节点8到15）。但是您无需使用webpack即可在节点中工作。只需使用esm非常轻巧且没有构建步骤的即可。
只需使用eslint，无需使用webpack。
您可以nodemon为此使用。这不是热重装，但我认为它更容易处理。我希望我可以引用一个比nodemon更轻量级的项目，但是它确实可以解决问题。
您共享的博客文章（截止日期为现在）使用webpack进行热重载。我认为这是一个过大的杀伤力，它会打开一蠕虫蠕虫，因为现在您必须处理webpack配置问题，而热重装也会导致意外的行为。
我们在前端使用webpack之类的工具所获得的收益并没有真正转化为后端。
我们将文件捆绑在前端的另一个原因是，浏览器可以以最佳的方式，以最佳的块下载文件，同时减少缓存破坏。后端不需要任何这些。
您可以使用自述文件中的webpack-node-externals：
npm install webpack-node-externals --save-dev
在您的webpack.config.js中：
var nodeExternals = require('webpack-node-externals');
module.exports = {
...
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
...
};