webpack.config.js

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ConcatPlugin = require('webpack-concat-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const configExt = require('./config');

const isDevelopmentMode = process.env.NODE_ENV === 'development';

const defaultPlugins = [
	new webpack.DefinePlugin({
		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
		'process.env.APP_CURRENT_VERSION': JSON.stringify(process.env.APP_CURRENT_VERSION),
	}),
	new ConcatPlugin({
		uglify: false,
		sourceMap: true,
		name: 'tiscc-libs.min.js',
		outputPath: 'libraries',
		fileName: 'tiscc-libs.min.js',
		filesToConcat: configExt.javascript.main,
		injectType: 'append',
		attributes: {
			defer: true,
		},
	}),
	new HtmlWebpackPlugin({
		filename: 'index.html',
		template: 'src/index.html',
		defer: true,
		hash: true,
	}),
	new ExtractTextPlugin({
		filename: 'css/tiscc.min.css',
		disable: isDevelopmentMode,
	}),
	new ScriptExtHtmlWebpackPlugin({
		defaultAttribute: 'defer',
	}),
];

module.exports = {
	entry: isDevelopmentMode ? ['webpack/hot/dev-server', 'webpack-hot-middleware/client', './src/js/main.js'] : './src/js/main.js',
	output: {
		filename: 'js/tiscc.min.js',
		path: path.resolve(__dirname, './dist'),
	},
	context: path.resolve(__dirname),
	devtool: isDevelopmentMode ? 'eval' : 'source-map',
	mode: process.env.NODE_ENV || 'production',
	module: {
		rules: [
			{
				test: /\.(css|scss)$/,
				use: isDevelopmentMode
					? [
							{
								loader: 'style-loader', // creates style nodes from JS strings
							},
							{
								loader: 'css-loader', // translates CSS into CommonJS
								options: {
									sourceMap: true
								},
							},
							{
								loader: 'sass-loader',
								options: {
									sourceMap: true
								},
							},
					  ]
					: ExtractTextPlugin.extract({
							fallback: 'style-loader',
							use: [
								{
									loader: 'css-loader',
									options: {
										minimize: true,
									},
								},
								{
									loader: 'sass-loader',
								},
							],
					  }),
			},
			{test: /\.html$/, loader: 'raw-loader'},
			// { test: /\.json$/, loader: 'json-loader' },
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				loaders: ['ng-annotate-loader', 'babel-loader'],
			},
			{
				test: /(\.js|\.jsx)$/,
				exclude: /(node_modules)/,
				loader: 'babel-loader',
				query: {
					presets: ['env'],
					plugins: ['transform-object-rest-spread'],
					compact: false,
				},
			},
		],
	},
	optimization: {
		minimizer: [
			new UglifyJsPlugin({
				cache: true,
				parallel: true,
				uglifyOptions: {
					mangle: false,
				},
				sourceMap: true,
			}),
		],
	},
	plugins: isDevelopmentMode ? [new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ...defaultPlugins] : defaultPlugins,
};