Add progress bar and bundle analyzer (http://localhost:8080/report.html) to webpack config.

package.json

@@ -19,7 +19,6 @@
   ],
   "devDependencies": {
     "@types/node": "^9.4.7",
-    "awesome-typescript-loader": "^4.0.1",
     "babel-loader": "^7.1.4",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -31,6 +30,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "babel-preset-env": "^1.6.1",
     "babel-register": "^6.26.0",
+    "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.10",
     "ejs-loader": "^0.3.1",
@@ -43,13 +43,16 @@
     "node-sass": "^4.7.2",
     "preact-render-to-string": "^3.7.0",
     "preload-webpack-plugin": "github:GoogleChromeLabs/preload-webpack-plugin",
+    "progress-bar-webpack-plugin": "^1.11.0",
     "sass-loader": "^6.0.7",
     "script-ext-html-webpack-plugin": "^2.0.0",
     "style-loader": "^0.20.3",
+    "ts-loader": "^4.0.1",
     "typescript": "^2.7.2",
     "typescript-loader": "^1.1.3",
     "typings-for-css-modules-loader": "^1.7.0",
     "webpack": "^4.1.1",
+    "webpack-bundle-analyzer": "^2.11.1",
     "webpack-cli": "^2.0.11",
     "webpack-dev-server": "^3.1.1",
     "webpack-plugin-replace": "^1.1.1"
@@ -62,7 +65,6 @@
     "preact-i18n": "^1.2.0",
     "preact-material-components": "^1.3.7",
     "preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
-    "preact-router": "^2.6.0",
+    "preact-router": "^2.6.0"
-    "ts-loader": "^4.0.1"
   }
 }

tsconfig.json

@@ -7,6 +7,10 @@
 		"sourceMap": true,
 		"jsx": "react",
 		"jsxFactory": "h",
-		"allowJs": true
+		"allowJs": true,
+		"baseUrl": ".",
+		"paths": {
+			"async!*": ["*"]
+		}
 	}
 }

webpack.config.js

@@ -1,12 +1,37 @@
+let fs = require('fs');
 let path = require('path');
 let webpack = require('webpack');
 // let ExtractTextPlugin = require('extract-text-webpack-plugin');
+let CleanWebpackPlugin = require('clean-webpack-plugin');
+let ProgressBarPlugin = require('progress-bar-webpack-plugin');
 let MiniCssExtractPlugin = require('mini-css-extract-plugin');
 let HtmlWebpackPlugin = require('html-webpack-plugin');
 let PreloadWebpackPlugin = require('preload-webpack-plugin');
 let ReplacePlugin = require('webpack-plugin-replace');
 let CopyPlugin = require('copy-webpack-plugin');
 let WatchTimestampsPlugin = require('./config/watch-timestamps-plugin');
+let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+let oldWrite = process.stderr.write;
+process.stderr.write = chunk => {
+	if (String(chunk).indexOf('DeprecationWarning:')!==-1) return;
+	return oldWrite.call(process.stderr, chunk);
+};
+
+function parseJson(text, fallback) {
+	try {
+		return JSON.parse(text);
+	}
+	catch (e) { }
+	return fallback || {};
+}
+
+function readFile(filename) {
+	try {
+		return fs.readFileSync(filename);
+	}
+	catch (e) {}
+}
 
 module.exports = function(_, env) {
 	let isProd = env.mode === 'production';
@@ -16,9 +41,11 @@ module.exports = function(_, env) {
 		path.join(__dirname, 'src/routes')
 	];
 
-	let babelRc = JSON.parse(require('fs').readFileSync('.babelrc'));
+	let babelRc = parseJson(readFile('.babelrc'));
 	babelRc.babelrc = false;
-	babelRc.presets[0][1].modules = isProd ? false : 'commonjs';
+	if (isProd) babelRc.presets[0][1].modules = false;
+
+	let manifest = parseJson(readFile('./src/manifest.json'));
 
 	return {
 		mode: env.mode || 'development',
@@ -34,7 +61,8 @@ module.exports = function(_, env) {
 			extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
 			alias: {
 				'app-entry-point': path.join(__dirname, 'src/index'),
-				style: path.join(__dirname, 'src/style')
+				style: path.join(__dirname, 'src/style'),
+				preact$: path.join(__dirname, 'node_modules/preact/dist/preact.js')
 			}
 		},
 		resolveLoader: {
@@ -125,6 +153,14 @@ module.exports = function(_, env) {
 			]
 		},
 		plugins: [
+			new ProgressBarPlugin({
+				format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m',
+				renderThrottle: 100,
+				summary: false,
+				clear: true
+			}),
+
+			isProd && new CleanWebpackPlugin(['build']),
 			isProd && new webpack.optimize.SplitChunksPlugin({}),
 			isProd && new MiniCssExtractPlugin({}),
 			// new ExtractTextPlugin({
@@ -150,7 +186,7 @@ module.exports = function(_, env) {
 					removeStyleLinkTypeAttributes: true,
 					removeComments: true
 				},
-				manifest: require('./src/manifest.json'),
+				manifest,
 
 				/** @todo Finish implementing prerendering similar to that of Preact CLI. */
 				prerender() {
@@ -162,6 +198,9 @@ module.exports = function(_, env) {
 				compile: true
 			}),
 			isProd && new PreloadWebpackPlugin(),
+			new webpack.DefinePlugin({
+				process: '{}'
+			}),
 			isProd && new ReplacePlugin({
 				include: /babel-helper$/,
 				patterns: [{
@@ -172,16 +211,31 @@ module.exports = function(_, env) {
 			new CopyPlugin([
 				{ from: 'src/manifest.json', to: 'manifest.json' },
 				{ from: 'src/assets', to: 'assets' }
-			])
+			]),
+
+			isProd && new BundleAnalyzerPlugin({
+				analyzerMode: 'static',
+				defaultSizes: 'gzip',
+				openAnalyzer: false
+			})
 		].filter(Boolean),
 
+		node: {
+			console: false,
+			global: true,
+			process: false,
+			__filename: 'mock',
+			__dirname: 'mock',
+			Buffer: false,
+			setImmediate: false
+		},
+
 		devServer: {
 			contentBase: path.join(__dirname, 'src'),
 			inline: true,
 			hot: true,
 			historyApiFallback: true,
 			noInfo: true,
-			progress: true,
 			// quiet: true,
 			clientLogLevel: 'none',
 			stats: 'minimal',