如何将我自己的服务器代码添加到 webpack-dev-server 执行中答案

【问题标题】：How to add my own server code to webpack-dev-server execution如何将我自己的服务器代码添加到 webpack-dev-server 执行中
【发布时间】：2016-09-30 01:34:07
【问题描述】：

关于如何将我自己的基于服务器的代码添加到 webpack-dev-server 的基本问题，或者将 webpack-dev-server 替换为 express（放弃热模块重新加载）。我希望找到一个名为 server.js 的文件，我可以在其中添加自己的代码。这是一个基本问题，因为每个非静态应用程序都需要自己的服务器代码，但我还没有找到直接的方法。我正在使用Angular 2 Webpack Starter。我希望随后在投入生产时很容易将 webpack-dev-server 直接删除。

【问题讨论】：

开发服务器仅用于前端开发。生产构建由您自己的服务器实现提供服务，例如我使用 HapiJS + Inert 为我的 Webpack 生产包提供服务，但使用 webpack-dev-server 进行开发。你永远不应该将 webpack 服务器用于生产环境。
了解 webpack 服务器不应该用于生产（因此最后一句）。问题是，当从前端开始做开发，然后加入到后端开发中，后端开发代码到哪里去就不清楚了。希望这是有道理的。

标签： angularjs express angular webpack

【解决方案1】：

您仍然可以使用 Express 并且通过使用 webpack-dev-middleware 和 webpack-hot-middleware 进行热重载。

这两个中间件都不应该在生产环境中加载，你可以使用这样的东西：

// Webpack (when not running in production mode)
if (process.env.NODE_ENV !== 'production') {
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const webpackConfig        = require('./webpack.config');
  const compiler             = require('webpack')(webpackConfig);

  app.use(webpackDevMiddleware(compiler, {
    noInfo     : true,
    publicPath : webpackConfig.output.publicPath
  }));
  app.use(webpackHotMiddleware(compiler));
}

（app 是一个 Express 实例）

【讨论】：