Client: update a webpack configs

client/config/webpack.common.js

@@ -8,6 +8,7 @@ const helpers = require('./helpers')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
+const AssetsPlugin = require('assets-webpack-plugin')
 const WebpackNotifierPlugin = require('webpack-notifier')
 
 /*
@@ -24,7 +25,10 @@ const METADATA = {
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = {
+module.exports = function (options) {
+  var isProd = options.env === 'production'
+
+  return {
     /*
      * Static metadata for index.html
      *
@@ -89,18 +93,16 @@ module.exports = {
        * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
        */
       preLoaders: [
-
         {
           test: /\.ts$/,
           loader: 'string-replace-loader',
           query: {
             search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
-          replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
+            replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)',
             flags: 'g'
           },
           include: [helpers.root('src')]
         }
-
       ],
 
       /*
@@ -121,9 +123,9 @@ module.exports = {
         {
           test: /\.ts$/,
           loaders: [
+            '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
             'awesome-typescript-loader',
-          'angular2-template-loader',
-          '@angularclass/hmr-loader'
+            'angular2-template-loader'
           ],
           exclude: [/\.(spec|e2e)\.ts$/]
         },
@@ -174,6 +176,11 @@ module.exports = {
      * See: http://webpack.github.io/docs/configuration.html#plugins
      */
     plugins: [
+      new AssetsPlugin({
+        path: helpers.root('dist'),
+        filename: 'webpack-assets.json',
+        prettyPrint: true
+      }),
 
       /*
        * Plugin: ForkCheckerPlugin
@@ -245,5 +252,5 @@ module.exports = {
       clearImmediate: false,
       setImmediate: false
     }
-
+  }
 }

client/config/webpack.dev.js

@@ -15,7 +15,7 @@ const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
 const HOST = process.env.HOST || 'localhost'
 const PORT = process.env.PORT || 3000
 const HMR = helpers.hasProcessFlag('hot')
-const METADATA = webpackMerge(commonConfig.metadata, {
+const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
   host: HOST,
   port: PORT,
   ENV: ENV,
@@ -27,7 +27,7 @@ const METADATA = webpackMerge(commonConfig.metadata, {
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = webpackMerge(commonConfig, {
+module.exports = webpackMerge(commonConfig({env: ENV}), {
   /**
    * Merged metadata from webpack.common.js for index.html
    *

client/config/webpack.prod.js

@@ -23,7 +23,7 @@ const WebpackMd5Hash = require('webpack-md5-hash')
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
 const HOST = process.env.HOST || 'localhost'
 const PORT = process.env.PORT || 8080
-const METADATA = webpackMerge(commonConfig.metadata, {
+const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
   host: HOST,
   port: PORT,
   ENV: ENV,
@@ -166,7 +166,7 @@ module.exports = webpackMerge(commonConfig, {
     new NormalModuleReplacementPlugin(
       /angular2-hmr/,
       helpers.root('config/modules/angular2-hmr-prod.js')
-    ),
+    )
 
     /**
      * Plugin: CompressionPlugin
@@ -175,10 +175,10 @@ module.exports = webpackMerge(commonConfig, {
      *
      * See: https://github.com/webpack/compression-webpack-plugin
      */
-    new CompressionPlugin({
-      regExp: /\.css$|\.html$|\.js$|\.map$/,
-      threshold: 2 * 1024
-    })
+    // new CompressionPlugin({
+    //   regExp: /\.css$|\.html$|\.js$|\.map$/,
+    //   threshold: 2 * 1024
+    // })
 
   ],
 

client/package.json

@@ -26,8 +26,8 @@
     "@angular/platform-browser": "2.0.0-rc.6",
     "@angular/platform-browser-dynamic": "2.0.0-rc.6",
     "@angular/router": "3.0.0-rc.2",
-    "@angularclass/hmr": "^1.0.1",
-    "@angularclass/hmr-loader": "^1.0.1",
+    "@angularclass/hmr": "^1.2.0",
+    "@angularclass/hmr-loader": "^3.0.1",
     "@types/core-js": "^0.9.28",
     "@types/node": "^6.0.38",
     "@types/source-map": "^0.1.26",
@@ -35,6 +35,7 @@
     "@types/webpack": "^1.12.29",
     "angular-pipes": "^3.0.0",
     "angular2-template-loader": "^0.5.0",
+    "assets-webpack-plugin": "^3.4.0",
     "awesome-typescript-loader": "^2.2.1",
     "bootstrap-loader": "^1.0.8",
     "bootstrap-sass": "^3.3.6",

client/webpack.config.js

@@ -1,16 +1,16 @@
 switch (process.env.NODE_ENV) {
   case 'prod':
   case 'production':
-    module.exports = require('./config/webpack.prod')
+    module.exports = require('./config/webpack.prod')({env: 'production'})
     break
 
   case 'test':
   case 'testing':
-    module.exports = require('./config/webpack.test')
+    module.exports = require('./config/webpack.test')({env: 'test'})
     break
 
   case 'dev':
   case 'development':
   default:
-    module.exports = require('./config/webpack.dev')
+    module.exports = require('./config/webpack.dev')({env: 'development'})
 }