feat(webpack): add analyze flag to enable webpack bundle analyzer

lib/commands/new/buildsystems/webpack/index.js

@@ -64,7 +64,8 @@ module.exports = function(project, options) {
     'json-loader',
     'html-loader',
     'istanbul-instrumenter-loader',
-    'opn'
+    'opn',
+    'webpack-bundle-analyzer'
   ).addToDependencies(
    'aurelia-polyfills'
   );

lib/resources/content/webpack.config.template.js

@@ -31,7 +31,7 @@ const cssRules = [
   // @endif
 ];
 
-module.exports = ({production, server, extractCss, coverage} = {}) => ({
+module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
   resolve: {
     // @if transpiler.id='typescript'
     extensions: ['.ts', '.js'],
@@ -191,6 +191,7 @@ module.exports = ({production, server, extractCss, coverage} = {}) => ({
     ])),
     ...when(production, new UglifyJsPlugin({
       sourceMap: true
-    }))
+    })),
+    ...when(analyze, new BundleAnalyzerPlugin())
   ]
 });

lib/resources/tasks/build-webpack.js

@@ -6,14 +6,15 @@ import gulp from 'gulp';
 import configureEnvironment from './environment';
 import del from 'del';
 
+const analyze = CLIOptions.hasFlag('analyze');
 const buildOptions = new Configuration(project.build.options);
 const production = CLIOptions.getEnvironment() === 'prod';
 const server = buildOptions.isApplicable('server');
 const extractCss = buildOptions.isApplicable('extractCss');
 const coverage = buildOptions.isApplicable('coverage');
 
 const config = webpackConfig({
-  production, server, extractCss, coverage
+  production, server, extractCss, coverage, analyze
 });
 const compiler = webpack(config);
 

lib/resources/tasks/build-webpack.json

@@ -0,0 +1,21 @@
+{
+  "name": "build",
+  "description": "Builds and processes all application assets.",
+  "flags": [
+    {
+      "name": "analyze",
+      "description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod",
+      "type": "boolean"
+    },
+    {
+      "name": "env",
+      "description": "Sets the build environment.",
+      "type": "string"
+    },
+    {
+      "name": "watch",
+      "description": "Watches source files for changes and refreshes the bundles automatically.",
+      "type": "boolean"
+    }
+  ]
+}

lib/resources/tasks/build-webpack.ts

@@ -6,14 +6,15 @@ import * as gulp from 'gulp';
 import configureEnvironment from './environment';
 import * as del from 'del';
 
+const analyze = CLIOptions.hasFlag('analyze');
 const buildOptions = new Configuration(project.build.options);
 const production = CLIOptions.getEnvironment() === 'prod';
 const server = buildOptions.isApplicable('server');
 const extractCss = buildOptions.isApplicable('extractCss');
 const coverage = buildOptions.isApplicable('coverage');
 
 const config = webpackConfig({
-  production, server, extractCss, coverage
+  production, server, extractCss, coverage, analyze
 });
 const compiler = webpack(<any>config);
 

lib/resources/tasks/run-webpack.json

@@ -2,19 +2,24 @@
   "name": "run",
   "description": "Builds the application and serves up the assets via a local web server, watching files for changes as you work.",
   "flags": [
+    {
+      "name": "analyze",
+      "description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod",
+      "type": "boolean"
+    },
     {
       "name": "env",
       "description": "Sets the build environment.",
       "type": "string"
     },
     {
-      "name": "watch",
-      "description": "Watches source files for changes and refreshes the app automatically.",
+      "name": "hmr",
+      "description": "Enable Hot Module Reload",
       "type": "boolean"
     },
     {
-      "name": "hmr",
-      "description": "Enable Hot Module Reload",
+      "name": "watch",
+      "description": "Watches source files for changes and refreshes the app automatically.",
       "type": "boolean"
     }
   ]