Babel/Webpack - Configuration for Hot Reloading Confusion? - reactjs

Question

I have been working on ReactJS for sometime now,I have come over quite a lot of modules eco-system (Webpack,Babel,React) etc..
I have some knowledge on webpack configuration,I have done basic configuration. See below
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;
The babelrc configuration is,
{
"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"]
}
]
}
]
]
}
}
}
I have planned not to use dev-server, instead I am planning to write Webserver which runs on Hapi.JS.
Questions:
Now that I am using react-transform-hmr. Do I need to use webpack-dev-middleware and webpack-hot-middleware ?
How should I implement / connect react-transform-hmr with my Hapi webserver ?
If I am gonna use webpack-dev-server and webpack-hot-middleware once again with this plugin
https://www.npmjs.com/package/hapi-webpack-plugin
Then what is the use of react-transform-hmr ?
& I see one of the boilerplate is also using this
https://github.com/Dindaleon/hapi-react-starter-kit/blob/master/webpack/hapiWebpack.js
Can someone explain what is the use of webpack-hot-middleware,webpack-dev-middleware,babel-transform-hmr ?