Babel/Webpack - Конфигурация для горячей путаницы перезагрузки?

Question

Я работаю над ReactJS уже некоторое время, я прошел через довольно много модулей эко-системы (Webpack,Babel,React) и т.д..

У меня есть некоторые знания о конфигурации веб-пакетов, я сделал базовую настройку. Увидеть ниже

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-сервер, вместо этого я планирую написать Web-сервер, который работает на Hapi.JS.

Вопросы:

1. Теперь, когда я использую response-transform-hmr. Нужно ли использовать webpack-dev-middleware и webpack-hot-middleware?
2. Как мне внедрить / подключить response-transform-hmr с моим веб-сервером Hapi?
3. Если я собираюсь использовать webpack-dev-server и webpack-hot-middleware еще раз с этим плагином

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

Тогда какая польза от response-transform-hmr?

И я вижу, что один из шаблон также использует это

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

4. Может кто-нибудь объяснить, что такое использование webpack-hot-middleware, webpack-dev-middleware, babel-transform-hmr?