webpack.config.ts

// tslint:disable:no-implicit-dependencies
// tslint:disable:import-name
import { AureliaPlugin, ModuleDependenciesPlugin } from 'aurelia-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import { readFileSync } from 'fs';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import * as path from 'path';
import * as webpack from 'webpack';
import autoprefixer from 'autoprefixer';

const pkg = JSON.parse(readFileSync('package.json', 'utf-8'));

const paths = {
	base: path.resolve(__dirname),
	src: path.resolve(__dirname, 'src'),
	demo: path.resolve(__dirname, 'demo'),
	nodeModules: path.resolve(__dirname, 'node_modules'),
	bluebird: path.resolve(__dirname, 'node_modules', 'bluebird', 'js', 'browser', 'bluebird'),
	tsconfig: path.resolve(__dirname, 'configs/tsconfig-demo.json')
};

const load = {
	style: { loader: 'style-loader' },
	css: { loader: 'css-loader' },
	postcss: {
		loader: 'postcss-loader',
		options: { plugins: () => [autoprefixer({ browsers: ['last 2 versions'] })] }
	},
	html: { loader: 'html-loader' },
	sass: { loader: 'sass-loader' },
	ts: {
		loader: 'ts-loader',
		options: { configFile: paths.tsconfig }
	},
	file: { loader: 'file-loader', options: { name: '[path][name].[ext]' } },
	expose: { loader: 'expose-loader?Promise' }
};

const minifyOpts = {
	removeComments: true,
	collapseWhitespace: true,
	collapseInlineTagWhitespace: true,
	collapseBooleanAttributes: true,
	removeAttributeQuotes: true,
	minifyCSS: true,
	minifyJS: true,
	removeScriptTypeAttributes: true,
	removeStyleLinkTypeAttributes: true,
	ignoreCustomFragments: [/\${.*?}/g]
};

function configure(env: { server?: boolean; production?: boolean } = {}): any {
	const { server, production } = env;
	const baseUrl = production ? `/${pkg.repository.url}/` : '/';
	const filename = '[name].[hash].bundle';

	return {
		mode: production ? 'production' : 'development',
		resolve: {
			extensions: ['.ts', '.js'],
			modules: [paths.src, paths.demo, paths.nodeModules],
			alias: {
				bluebird: paths.bluebird,
				'@aurelia-office-ui-fabric': paths.src
			}
		},
		entry: {
			app: ['aurelia-bootstrapper'],
			vendor: ['bluebird']
		},
		output: {
			path: paths.base,
			publicPath: baseUrl,
			filename: `${filename}.js`,
			sourceMapFilename: `${filename}.map`
		},
		devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
		performance: { hints: false },
		devServer: {
			historyApiFallback: true,
			open: true,
			lazy: false
		},
		module: {
			rules: [
				{
					test: /\.css$/i,
					use: [load.style, load.css, load.postcss],
					issuer: [{ not: [{ test: /\.html?$/i }] }]
				},
				{
					test: /\.css$/i,
					use: [load.css, load.postcss],
					issuer: [{ test: /\.html?$/i }]
				},
				{
					test: /\.html?$/i,
					use: [load.html]
				},
				{
					test: /\.scss$/i,
					use: [load.style, load.css, load.postcss, load.sass],
					issuer: /\.[tj]s$/i
				},
				{
					test: /\.scss$/i,
					use: [load.css, load.postcss, load.sass],
					issuer: /\.html?$/i
				},
				{
					test: /\.ts$/i,
					use: [load.ts],
					exclude: /node_modules/i
				},
				{
					test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/i,
					use: [load.expose]
				},
				{
					test: /\.(jpe?g|png|gif|svg|tff|eot|otf|woff2?)$/i,
					use: [load.file]
				}
			]
		},
		plugins: [
			new HtmlWebpackPlugin({
				template: 'demo/index.ejs',
				metadata: { title: pkg.name, server, baseUrl, debug: !production },
				minify: !!production && minifyOpts
			}),
			new AureliaPlugin(),
			new webpack.ProvidePlugin({ Promise: 'bluebird' }),
			new ModuleDependenciesPlugin({ 'aurelia-testing': ['./compile-spy', './view-spy'] })
		]
	};
}

export default configure;