Babel / Webpack - Hot Reloading Confusion的配置？

我一直在研究ReactJS，我已经经历了很多模块生态系统（Webpack，Babel，React）等 .

我对webpack配置有一些了解，我已经完成了基本配置 . 见下文

const Path = require('path');
const Webpack = require('webpack');
const envs = require('../utils/env');
const Possibles = envs.possibles;

const NODE_ENV = process.env.NODE_ENV;

const miniOps = {
  development: Possibles.dev.indexOf(NODE_ENV) > -1,
  production: Possibles.prod.indexOf(NODE_ENV) > -1
};

const configuration = {
  target: 'web',
  output: {
    path: Path.join(__dirname, '..', 'public'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },
  module: {
    loaders: []
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new Webpack.DefinePlugin({ NODE_ENV: JSON.stringify(NODE_ENV) })
  ]
};

if (miniOps.development) {
  configuration.resolve.alias = {};
  configuration.module.noParse = [];

  configuration.cache = true;
  configuration.devtool = 'cheap-eval-source-map';

  configuration.entry = [
    Path.join(__dirname, '..', 'app/main.js')
  ];

  const minideps = [
    'react/dist/react.min.js'
  ];

  const NODE_MODULES_DIR = Path.join(__dirname, '..', 'node_modules');

  minideps.forEach(dep => {
    const depPath = Path.resolve(NODE_MODULES_DIR, dep);
    configuration.resolve.alias[dep.split(Path.sep)[0]] = depPath;
    configuration.module.noParse.push(depPath);
  });

  configuration.plugins.push(
    new Webpack.optimize.OccurenceOrderPlugin(),
    new Webpack.NoErrorsPlugin(),
    new Webpack.HotModuleReplacementPlugin()
  );

  configuration.module.loaders.push({
    test: Path.resolve(NODE_MODULES_DIR, minideps[0]),
    loader: 'expose?React'
  });

  configuration.module.loaders.push({
    test: /\.(js|jsx)$/,
    include: Path.join(__dirname, '..', 'app'),
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      cacheDirectory: true
    }
  });
}

if (miniOps.production) {
  configuration.entry = {
    app: [
      Path.join(__dirname, '..', 'app/main.js')
    ],
    vendor: ['react']
  };

  configuration.output.path = Path.join(__dirname, '..', 'dist');

  configuration.module.loaders.push({
    test: /\.(js|jsx)$/,
    include: Path.join(__dirname, '..', 'app'),
    exclude: /node_modules/,
    loader: 'babel'
  });

  configuration.plugins.push(
    new Webpack.optimize.UglifyJsPlugin({
      compress: {
        unused: true,
        dead_code: true,
        warnings: false,
        screw_ie8: true
      }
    })
  );

  configuration.plugins.push(
    new Webpack.optimize.OccurrenceOrderPlugin(),
    new Webpack.optimize.DedupePlugin(),
    new Webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
  );
}

console.log(`Bundling modules...... NODE_ENV: ${NODE_ENV}`);

module.exports = configuration;

babelrc配置是，

{
  "presets": ["es2015", "react"],
  "env": {
    "development": {
      "plugins": [
        [ "transform-runtime" ],
        [
          "react-transform", {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": ["react"],
                "locals": ["module"]
              },
              {
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
          }
        ]
      ]
    }
  }
}

我计划不使用dev-server，而是计划编写在Hapi.JS上运行的Webserver .

问题：

• 现在我正在使用 react-transform-hmr . 我是否需要使用webpack-dev-middleware和webpack-hot-middleware？

• 我应该如何实现/连接react-transform-hmr与我的Hapi网络服务器？

• 如果我要用这个插件再次使用webpack-dev-server和webpack-hot-middleware

https://www.npmjs.com/package/hapi-webpack-plugin

那么 react-transform-hmr 的用途是什么？

我看到其中一个样板也在使用它

https://github.com/Dindaleon/hapi-react-starter-kit/blob/master/webpack/hapiWebpack.js

• 有人可以解释一下webpack-hot-middleware，webpack-dev-middleware，babel-transform-hmr的用途是什么？