tmp.js

import _ from 'underscore';
import webpack from 'webpack';

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import WebpackMd5Hash from 'webpack-md5-hash';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import autoprefixer from 'autoprefixer';
import path from 'path';

import rules from './webpack/rules';

process.env.APP_PORT = process.env.APP_PORT || 5080;
process.env.BACKEND_URL = process.env.BACKEND_URL || '';
process.env.FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:5080';
process.env.RUN_ENVIRONMENT = process.env.NODE_ENV || 'production';
process.env.NODE_ENV = process.env.RUN_ENVIRONMENT;

const isDevelopment = (process.env.NODE_ENV == 'development');

const options = {
	resolve: {
		extensions: ['*', '.js', '.jsx', '.json']
	},
	devtool: (isDevelopment) ? 'eval-source-map' : 'source-map',
	entry: _.compose([].concat(
		!isDevelopment ? false : [
			'./src/webpack-public-path',
			'webpack-hot-middleware/client?reload=true',
		], [
			path.resolve(__dirname, 'src/index.js')
		])),
	target: 'web',
	output: {
		path: path.resolve(__dirname, 'dist'),
		publicPath: '/',
		filename: '[name].[chunkhash].js'
	}
};

const plugins = _.compact([].concat(
	[
		// ***************** COMMON PLUGINS *****************
		new WebpackMd5Hash(),
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: process.env.NODE_ENV
			},
			__ENV__: JSON.stringify(process.env.NODE_ENV),
			__DEV__: isDevelopment
		}),

		new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
			template: 'src/index.ejs',
			BACKEND_HOST: process.env.BACKEND_HOST,
			BACKEND_PORT: process.env.BACKEND_PORT,
			minify: Object.assign({
				// common
				removeComments: true,
				collapseWhitespace: true
			}, isDevelopment ? {
				// development
			} : {
				// production
				removeRedundantAttributes: true,
				useShortDoctype: true,
				removeEmptyAttributes: true,
				removeStyleLinkTypeAttributes: true,
				keepClosingSlash: true,
				minifyJS: true,
				minifyCSS: true,
				minifyURLs: true
			}),
			inject: true,
			trackJSToken: ''
		}),
		new webpack.LoaderOptionsPlugin({
			minimize: isDevelopment,
			debug: isDevelopment,
			noInfo: true,
			options: {
				sassLoader: {
					includePaths: [path.resolve(__dirname, 'src', 'scss')]
				},
				context: '/',
				postcss: () => [autoprefixer]
			}
		})
	],
	isDevelopment ? false : [
		// ***************** DEVELOPMENT PLUGINS *****************
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NoEmitOnErrorsPlugin(),
	],
	!isDevelopment ? false : [
		// ***************** PRODUCTION PLUGINS *****************
		new CopyWebpackPlugin([
			{from: 'src/assets/img/app-icons'},
		]),
		new ExtractTextPlugin('[name].[contenthash].css'),
		new webpack.optimize.UglifyJsPlugin({
			sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
		}),
	]
));

export default {
	...options,
	plugins,
	module: {
		rules: [
			...rules,
			{
				test: /(\.css|\.scss|\.sass)$/,
				loader: ExtractTextPlugin.extract('css-loader?sourceMap!postcss-loader!sass-loader?sourceMap')
			}
		]
	}
};