package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --env.prod=true --config webpack.config.js --progress --colors",
    "start": "webpack-dev-server",
    "prod": "cross-env NODE_ENV=production webpack-dev-server --env.prod=true",
    "test": "cross-env NODE_PATH=.:app jest --maxWorkers=4",
    "lint": "eslint ./src ./webpack.config.js -f table || true"
  },
  "author": "Yury",
  "devDependencies": {
    "autoprefixer": "^6.7.0",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^18.0.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-1": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-runtime": "^6.22.0",
    "cross-env": "^3.1.4",
    "css-loader": "0.23.1",
    "cssnano": "^3.10.0",
    "eslint": "^3.14.1",
    "eslint-config-wpcalypso": "^0.6.0",
    "eslint-plugin-react": "^6.9.0",
    "eslint-plugin-wpcalypso": "^3.0.2",
    "extract-text-webpack-plugin": "^2.0.0-rc.0",
    "file-loader": "^0.9.0",
    "isomorphic-style-loader": "^1.1.0",
    "jest-cli": "^18.1.0",
    "node-sass": "^4.3.0",
    "postcss-loader": "^1.2.2",
    "react-hot-loader": "^1.3.0",
    "sass-lint": "^1.10.2",
    "sass-loader": "^4.0.2",
    "source-map-support": "^0.4.3",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  },
  "dependencies": {
    "babel-runtime": "^6.22.0",
    "classnames": "2.2.5",
    "express": "^4.14.0",
    "font-awesome": "^4.7.0",
    "normalize.css": "^5.0.0",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  },
  "jest": {
    "testRegex": "(/tests/.*)\\.(js|jsx)$",
    "timers": "fake",
    "verbose": true
  }
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');

const sourcePath = path.join(__dirname, './src');
const staticsPath = path.join(__dirname, './dist');

module.exports = function (env) {
	const nodeEnv = env && env.prod ? 'production' : 'development';
	const isProd = nodeEnv === 'production';

	const plugins = [
		new webpack.optimize.CommonsChunkPlugin( {
			name: 'vendor',
			minChunks: Infinity,
			filename: 'vendor.bundle.js'
		} ),
		new webpack.DefinePlugin( {
			'process.env': {
				NODE_ENV: JSON.stringify( nodeEnv )
			}
		} ),
		new webpack.NamedModulesPlugin()
	];

	if ( isProd ) {
		plugins.push(
			new webpack.optimize.UglifyJsPlugin( {
				compress: {
					warnings: false,
					screw_ie8: true,
					conditionals: true,
					unused: true,
					comparisons: true,
					sequences: true,
					dead_code: true,
					evaluate: true,
					if_return: true,
					join_vars: true,
				},
				output: {
					comments: false,
				},
			} )
		);
	} else {
		plugins.push(
			new webpack.HotModuleReplacementPlugin()
		);
	}

	return {
		devtool: isProd ? 'source-map' : 'eval',
		context: sourcePath,
		entry: {
			js: './client/index.jsx',
			vendor: [ 'react', 'react-dom' ]
		},
		output: {
			path: staticsPath,
			filename: '[name].bundle.js',
		},
		module: {
			rules: [
				{
					test: /\.html$/,
					exclude: /node_modules/,
					use: {
						loader: 'file-loader',
						query: {
							name: '[name].[ext]'
						},
					},
				},
				{
					test: /\.(eot|svg|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
					use: {
						loader: 'file-loader',
						query: {
							name: 'fonts/[name].[ext]',
							publicPath: '/'
						},
					}
				},
				{
					test: /\.scss$/,
					use: [
						{
							loader: 'isomorphic-style-loader',
						},
						{
							loader: 'css-loader',
							query: {
								modules: true,
								importLoaders: 1,
								localIdentName: '[path][local]',
								camelCase: 'dashes',
								sourceMap: true
							}
						},
						{
							loader: 'postcss-loader',
						},
						{
							loader: 'sass-loader',
							options: {
								data: "$env: " + nodeEnv + ";",
								includePaths: [ path.resolve( __dirname, 'app' ) ],
								context: __dirname,
								sourceMap: true
							}
						}
					]
				},
				{
					test: /\.(js|jsx)$/,
					exclude: /node_modules/,
					use: [
						'babel-loader'
					],
				},
			],
		},
		resolve: {
			extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
			modules: [
				path.resolve(__dirname, 'node_modules'),
				sourcePath
			]
		},

		plugins,

		performance: isProd && {
			maxAssetSize: 100,
			maxEntrypointSize: 300,
			hints: 'warning',
		},

		stats: {
			colors: {
				green: '\u001b[32m',
			}
		},

		devServer: {
			contentBase: './dist',
			historyApiFallback: true,
			port: 3000,
			compress: isProd,
			inline: !isProd,
			hot: !isProd,
			stats: {
				assets: true,
				children: false,
				chunks: false,
				hash: false,
				modules: false,
				publicPath: false,
				timings: true,
				version: false,
				warnings: true,
				colors: {
					green: '\u001b[32m',
				}
			},
		}

	};
};