Hot Module Replacement

.babelrc

{
    "presets": [
        ["es2015", {
            "modules": false
        }],
        "react",
        "stage-0"
    ],
    "plugins": ["react-hot-loader/babel"]
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import {AppContainer} from "react-hot-loader";
import App from "./components/App";

console.log(`API_url:${API_URL}`);

const render = (Component) => {
    ReactDOM.render(
        <AppContainer><Component/></AppContainer>, document.getElementById("app"));
};

render(App);

if (module.hot) {
    module.hot.accept("./components/App", () => {
            render(App)
        });
}

package.json

{
    "name": "webpack-test",
    "version": "1.0.0",
    "description": "webpack tests",
    "main": "index.js",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "package": "webpack --profile --colors --progress",
        "start": "webpack-dev-server"
    },
    "keywords": [],
    "author": "Anyul Rivas",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.24.1",
        "babel-loader": "^7.0.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "clean-webpack-plugin": "^0.1.16",
        "css-loader": "^0.28.3",
        "extract-text-webpack-plugin": "^2.1.0",
        "html-webpack-plugin": "^2.28.0",
        "http-server": "^0.10.0",
        "node-sass": "^4.5.3",
        "sass-loader": "^6.0.5",
        "style-loader": "^0.18.1",
        "uglifyjs-webpack-plugin": "^0.4.3",
        "webpack": "^2.6.1",
        "webpack-dev-server": "^2.4.5"
    },
    "dependencies": {
        "react": "^15.5.4",
        "react-dom": "^15.5.4",
        "react-hot-loader": "^3.0.0-beta.7"
    }
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env = "dev") => {
    console.log(` ⚛️ Working on ${env.toUpperCase()}`);
    return {
        context: path.resolve(__dirname, "app"),
        entry: [
          "react-hot-loader/patch", 
          "webpack-dev-server/client?http://localhost:8080", 
          "webpack/hot/only-dev-server", 
          "./index.js"
        ],
        output: {
            filename: '[name].[hash].js',
            chunkFilename: '[name].[chunkhash].js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: "/"
        },
        devtool: "inline-source-map",
        devServer: {
            hot: true,
            contentBase: path.resolve(__dirname, "dist"),
            publicPath: "/"
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', "react", "stage-0"]
                    }
                }, {
                    test: /\.(scss|css)$/,
                    use: ExtractTextPlugin.extract({
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: true
                                }
                            }
                        ],
                        fallback: 'style-loader'
                    })
                }
            ]
        },

        plugins: ((env) => {
            const commonPlugins = [
                new webpack.HotModuleReplacementPlugin(),
                new webpack.NamedModulesPlugin(),
                new CleanWebpackPlugin("./dist"),
                new UglifyJSPlugin({
                    cacheFolder: __dirname,
                    debug: false,
                    minimize: true,
                    sourceMap: false,
                    output: {
                        comments: false
                    },
                    compress: {
                        warnings: false,
                        screw_ie8: true
                    }
                }),
                new ExtractTextPlugin('style.css'),
                new HtmlWebpackPlugin({
                    template: `${__dirname}/app/index.html`,
                    filename: "index.html",
                    inject: "body"
                }, 
                new webpack.optimize.CommonsChunkPlugin({name: 'js', filename: 'bundle-[hash].min.js'}), 
                new webpack.optimize.CommonsChunkPlugin({
                    name: 'vendor',
                    minChunks: function (module) {
                        return module.context && module
                            .context
                            .indexOf('node_modules') !== -1;
                    }
                }), new webpack.optimize.CommonsChunkPlugin({name: 'manifest'}))
            ];
            switch (env) {
                case "dev":
                    commonPlugins.push(new webpack.DefinePlugin({
                        "process.env": {
                            NODE_ENV: JSON.stringify("production")
                        },
                        API_URL: JSON.stringify(`http://www.google.com/dev`)
                    }));
                    break;
                default:
                    commonPlugins.push(new webpack.DefinePlugin({
                        "process.env": {
                            NODE_ENV: JSON.stringify("production")
                        },
                        API_URL: JSON.stringify(`http://${env}.google.com`)
                    }));
                    break;
            }
            return commonPlugins;
        })(env)
    }
};