package.json

{
  "name": "arda-tryout",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "eject": "react-scripts eject",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
    "build:clean": "rimraf ./build",
    "build:dll": "node ./internals/scripts/dependencies.js",
    "flow": "flow"
  },
  "keywords": [
    "React",
    "Redux",
    "Frontend",
    "UI"
  ],
  "author": "Andika D. Riyandi",
  "license": "SEE LICENSE IN Licensed",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.0.0-beta.3",
    "cors": "^2.8.4",
    "es6-promise": "^4.2.4",
    "eslint-plugin-redux-saga": "^0.6.0",
    "history": "^4.7.2",
    "immutable": "^3.8.2",
    "isomorphic-fetch": "^2.2.1",
    "mongoose": "^4.13.9",
    "nodemon": "^1.17.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.1.0",
    "reactstrap": "^5.0.0-alpha.4",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.2",
    "babel-loader": "^7.1.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.10",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-flowtype": "^2.46.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "flow": "^0.2.3",
    "flow-bin": "^0.67.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.4.2",
    "rimraf": "^2.6.2",
    "style-loader": "^0.20.2",
    "webpack": "^4.0.0",
    "webpack-dev-server": "^3.0.0"
  }
}

webpack.config.babel.js

import webpack from "webpack";
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin( {
    template: path.join( __dirname, "/public/index.html" ),
    filename: "index.html",
    inject: "body",
} );

const productionPlugin = new webpack.DefinePlugin( {
    "process.env": {
        NODE_ENV: JSON.stringify( "production" ),
    },
} );

const PATHS = {
    app: path.join( __dirname, "src-ui" ),
    build: path.join( __dirname, "public" ),
};

const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === "production";
process.env.Babel_ENV = LAUNCH_COMMAND;

const base = {
    entry: [
        PATHS.app,
    ],
    output: {
        path: PATHS.build,
        filename: "index_bundle.js",
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.css$/, loader: "style-loader!css-loader" },
        ],
    },
    resolve: {
        modules: [ "src-ui", "node_modules" ],
    },
};

const developmentConfig = {
    devtool: "cheap-module-inline-source-map",
    devServer: {
        contentBase: PATHS.build,
        hot: true,
        inline: true,
        progress: true,
    },
    plugins: [ HtmlWebpackPluginConfig, new webpack.HotModuleReplacementPlugin() ],
};

const productionConfig = {
    devtool: "cheap-module-source-map",
    plugins: [ HtmlWebpackPluginConfig, productionPlugin ],
};

export default Object.assign( {}, base, isProduction === true ?
    productionConfig : developmentConfig );