survive js webpack and react kanban

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const stylelint = require('stylelint');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const pkg = require('./package.json');
const HTMLWebpackPlugin = require('html-webpack-plugin');


const TARGET = process.env.npm_lifecycle_event;


process.env.BABEL_ENV = TARGET;

const PATHS = {
	app: path.join(__dirname, 'app'),
	build: path.join(__dirname, 'build')
};

const common = {
	// Entry accepts a path or an object of entries.
	// The build chapter contains an example of the latter.
	entry: PATHS.app,
	// Add resolve.extensions
	// The .'s are needed before the extensions and the blank '' is needed
	// to allow for imports without an extension
	resolve: {
		extensions: ['', '.js', '.jsx']
	},
	output: {
		path: PATHS.build,
		// spit it out using entry name
		filename: '[name].js'
	},
	module: {
		preLoaders: [
			{
				test: /\.jsx?$/,
				loaders: ['eslint'],
				include: PATHS.app
			},
      {
        test: /\.css$/,
        loaders: ['postcss'],
        include: PATHS.app
      }
		],
		loaders: [
			{
				// test expects a RegExp! Note the slashes..
				test: /\.css$/,
				loaders: ['style', 'css'],
				// Include accepts either a pat or an array of paths
				include: PATHS.app
			},
			// set the babel loader to match js and jsx files from PATHS.app 
			// dir only
			// ?cacheDirectory enables caching in the default OS dir (what is that?)
			// can be customized with ?cacheDirectory=<path>
			{
				test: /\.jsx?$/,
				loaders: ['babel?cacheDirectory'],
				include: PATHS.app
			}
		]
	},
	postcss: function () {
		return [stylelint({
			rules: {
				'color-hex-case': 'lower'
			}
		})];
	},
	plugins: [
		new HTMLWebpackPlugin({
			template: 'node_modules/html-webpack-template/index.ejs',
			title: 'Kanban',
			appMountId: 'app',
			inject: false
		})
	]
};

// Default configuration
if (TARGET === 'start' || !TARGET){
	module.exports = merge(common, {
		devServer: {

			// Enable history API fallback so HTML5 History api based
			// routing works. This is a good default that will come
			// in handy in more complicated setups.
			historyApiFallback: true,
			hot: true,
			inline: true,
			progress: true,

			// Display only errors that reduce the aount of output
			stats: 'errors-only',

			devtool: 'eval-source-map',

			// Parse host and port from env so this is easy to customize

			host: process.env.HOST,
			port: process.env.PORT
		},
		plugins: [
			new webpack.HotModuleReplacementPlugin(),
			new NpmInstallPlugin({
				save: true // --save
			})
		]
	});
}

if (TARGET === 'build') {
	module.exports = merge(common, {
		// vendor entry point needed for the split into chunks
		entry: {
			vendor: Object.keys(pkg.dependencies).filter(v => {
				// we exclude alt-utils because it wont work with this setup
				// due to the way the package has been designed 
				// (no package.json main)
				return v !== 'alt-utils';
			})
		},
		output: {
			path: PATHS.build,
			filename: '[name].[chunkhash].js',
			chunkFilename: '[chunkhash].js'
		},
		plugins: [
			new webpack.optimize.CommonsChunkPlugin({
				names: ['vendor', 'manifest']
			}),
			new webpack.optimize.UglifyJsPlugin({
				compress: {
					warnings: false
				}
			}),
			new webpack.DefinePlugin({
				'process.env.NODE_ENV': '"production"'
			})
		]
	});
}