How to use the webpack.HotModuleReplacementPlugin function in webpack

// 
      // In production, it will be an empty string unless you specify "homepage"
      // in `package.json`, in which case it will be the pathname of that URL.
      // In development, this will be an empty string.
      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
      // This gives some necessary context to module not found errors, such as
      // the requesting resource.
      new ModuleNotFoundPlugin(paths.appPath),
      // Makes some environment variables available to the JS code, for example:
      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
      // It is absolutely essential that NODE_ENV is set to production
      // during a production build.
      // Otherwise React will be compiled in the very slow development mode.
      new webpack.DefinePlugin(env.stringified),
      // This is necessary to emit hot updates (currently CSS only):
      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
      // Watcher doesn't work well if you mistype casing in a path so we use
      // a plugin that prints an error when you attempt to do this.
      // See https://github.com/facebook/create-react-app/issues/240
      isEnvDevelopment && new CaseSensitivePathsPlugin(),
      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebook/create-react-app/issues/186
      isEnvDevelopment &&
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
      isEnvProduction &&
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',

{   test: /\.woff(\?[a-z0-9\.#=]+)?$/i,
                    loader: "url?limit=" + inlineFileSizeLimit + "&mimetype=application/font-woff" },

                {   test: /\.woff2(\?[a-z0-9\.#=]+)?$/i,
                    loader: "url?limit=" + inlineFileSizeLimit + "&mimetype=application/font-woff2" },

                {   test: /\.svg(\?[a-z0-9\.#=]+)?$/i,
                    loader: "url?limit=" + inlineFileSizeLimit + "&mimetype=image/svg+xml" },

                {   test: /\.modernizrrc$/, loader: "modernizr" }
            ]
        },
        plugins: choose({
            "client:development": [
                ...commonPlugins,
                new Webpack.HotModuleReplacementPlugin(),
                new Webpack.NoErrorsPlugin()
            ],
            "client:production": [
                ...commonPlugins,
                new Webpack.optimize.UglifyJsPlugin({
                    compress: {
                        warnings: false
                    }
                }),
                new ExtractTextPlugin("[name].[contenthash].css", { allChunks: true }),
                function() {
                    // replace bundle.css and bundle.js in html with minified versions
                    // and copy html to build/dist folder:

                    this.plugin("done", statsData => {
                        let stats = statsData.toJson()

// 
      // In production, it will be an empty string unless you specify "homepage"
      // in `package.json`, in which case it will be the pathname of that URL.
      // In development, this will be an empty string.
      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
      // This gives some necessary context to module not found errors, such as
      // the requesting resource.
      new ModuleNotFoundPlugin(paths.appPath),
      // Makes some environment variables available to the JS code, for example:
      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
      // It is absolutely essential that NODE_ENV is set to production
      // during a production build.
      // Otherwise React will be compiled in the very slow development mode.
      new webpack.DefinePlugin(env.stringified),
      // This is necessary to emit hot updates (currently CSS only):
      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
      // Watcher doesn't work well if you mistype casing in a path so we use
      // a plugin that prints an error when you attempt to do this.
      // See https://github.com/facebook/create-react-app/issues/240
      isEnvDevelopment && new CaseSensitivePathsPlugin(),
      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebook/create-react-app/issues/186
      isEnvDevelopment &&
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
      isEnvProduction &&
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const WriteFilePlugin = require('write-file-webpack-plugin');
const [client, server] = require('./webpack.config');

// Add webpack dev server HMR entrypoints
client.entry.client.unshift(
  'react-hot-loader/patch',
  `webpack-dev-server/client?http://${process.env.HOST}:8080/`,
  'webpack/hot/only-dev-server',
);
// add HMR
client.plugins.push(
  new webpack.HotModuleReplacementPlugin(),
  new WriteFilePlugin(),
);

const proxy =  {
  '/api': {
    target: process.env.APIHOST || 'http://localhost',
    secure: false
  }
};

new WebpackDevServer(
  webpack([client, server]),
  Object.assign({}, client.devServer, { proxy })
).listen(8080);

React: 'react'
    }),
    new webpack.DefinePlugin({
      __CLIENT__: (options.target === 'web'),
    }),
    new webpack.NoErrorsPlugin(),
  ];

  // For client
  if (isClient) {

    // Add hot middleware
    entry.push('webpack-hot-middleware/client');

    // Add HMRE plugin
    plugins.push(new webpack.HotModuleReplacementPlugin());

  } else {

    // Add source maps and extract styles
    plugins.push(
      new ExtractTextPlugin('styles.css')
    );
  }

  // Set entry point
  entry.push(options.entry);

  // Styles loader
  var loader = {
    css: 'css-loader?modules&importLoaders=1&localIdentName=[path]scope__[name]__[local]',
    babel: 'babel-loader?presets[]=react&presets[]=es2015&presets[]=stage-0' + (isClient ? '&presets[]=react-hmre' : ''),

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var settings = require('../../enclave.js')
var HotReloader = new webpack.HotModuleReplacementPlugin()
var pathPrefix = '../../'
var isDeveloping
try {
  isDeveloping = require('./dev-mode')
} catch (e) {
  isDeveloping = ''
}

if (isDeveloping) {
  pathPrefix = ''
  settings = {
    live: 'true',
    index: './example/index.html',
    entry: './example/App.js',
    output: './example/dist',
    port: 8080,

}),
    new ForkTsCheckerWebpackPlugin({
      tslint: true,
      checkSyntacticErrors: true
    })
  ];

  if (isProd) {
    plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /\/environments\/environment\.ts/,  `${sourcePath}/environments/environment.prod.ts`
      ),
      new UglifyJsPlugin({ sourceMap: true })
    );
  } else {
    plugins.push(new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin());
  }

  const config = {
    entry: {
      app: sourcePath + '/main.ts',
    },
    output: {
      path: distPath,
      filename: '[name].bundle.[hash:4].js',
    },
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'html-loader',
          options: { minimize: true }

var webpack = require("webpack");
var config = require("./webpack.config.js");

config.entry = [
  //"webpack-dev-server/client?http://localhost:8080"
  "webpack-hot-middleware/client"
, config.entry
];

config.plugins.unshift(
  new webpack.HotModuleReplacementPlugin()
);

config.module.loaders[0].query = {
  stage: 0
, plugins: ["react-transform"]
, extra: {
    "react-transform": {
      transforms: [{
        transform: "react-transform-hmr"
      , imports: ["react"]
      , locals: ["module"]
      }
    , {
        transform: "react-transform-catch-errors"
      , imports: ["react", "redbox-react"]
      }]

);
  }

  if (snapshot) {
    config.plugins.push(
      new nsWebpack.NativeScriptSnapshotPlugin({
        chunk: 'vendor',
        requireModules: ['tns-core-modules/bundle-entry-points'],
        projectRoot,
        webpackConfig: config
      })
    );
  }

  if (hmr) {
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
  }

  return config;
};