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,226 +25,232 @@ const METADATA = {
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = {
+module.exports = function (options) {
-  /*
+  var isProd = options.env === 'production'
-   * Static metadata for index.html
-   *
-   * See: (custom attribute)
-   */
-  metadata: METADATA,
 
-  /*
+  return {
-   * Cache generated modules and chunks to improve performance for multiple incremental builds.
-   * This is enabled by default in watch mode.
-   * You can pass false to disable it.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#cache
-   */
-  // cache: false,
-
-  /*
-   * The entry point for the bundle
-   * Our Angular.js app
-   *
-   * See: http://webpack.github.io/docs/configuration.html#entry
-   */
-  entry: {
-    'polyfills': './src/polyfills.ts',
-    'vendor': './src/vendor.ts',
-    'main': './src/main.ts'
-  },
-
-  /*
-   * Options affecting the resolving of modules.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#resolve
-   */
-  resolve: {
     /*
-     * An array of extensions that should be used to resolve modules.
+     * Static metadata for index.html
      *
-     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+     * See: (custom attribute)
      */
-    extensions: [ '', '.ts', '.js', '.scss' ],
+    metadata: METADATA,
 
-    // Make sure root is src
-    root: helpers.root('src'),
-
-    // remove other default values
-    modulesDirectories: [ 'node_modules' ]
-  },
-
-  output: {
-    publicPath: '/client/'
-  },
-
-  /*
-   * Options affecting the normal modules.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#module
-   */
-  module: {
     /*
-     * An array of applied pre and post loaders.
+     * Cache generated modules and chunks to improve performance for multiple incremental builds.
+     * This is enabled by default in watch mode.
+     * You can pass false to disable it.
      *
-     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
+     * See: http://webpack.github.io/docs/configuration.html#cache
      */
-    preLoaders: [
+    // cache: false,
 
-      {
+    /*
-        test: /\.ts$/,
+     * The entry point for the bundle
-        loader: 'string-replace-loader',
+     * Our Angular.js app
-        query: {
+     *
-          search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
+     * See: http://webpack.github.io/docs/configuration.html#entry
-          replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
+     */
-          flags: 'g'
+    entry: {
+      'polyfills': './src/polyfills.ts',
+      'vendor': './src/vendor.ts',
+      'main': './src/main.ts'
+    },
+
+    /*
+     * Options affecting the resolving of modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve
+     */
+    resolve: {
+      /*
+       * An array of extensions that should be used to resolve modules.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+       */
+      extensions: [ '', '.ts', '.js', '.scss' ],
+
+      // Make sure root is src
+      root: helpers.root('src'),
+
+      // remove other default values
+      modulesDirectories: [ 'node_modules' ]
+    },
+
+    output: {
+      publicPath: '/client/'
+    },
+
+    /*
+     * Options affecting the normal modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module
+     */
+    module: {
+      /*
+       * An array of applied pre and post loaders.
+       *
+       * 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.default : mod)',
+            flags: 'g'
+          },
+          include: [helpers.root('src')]
+        }
+      ],
+
+      /*
+       * An array of automatically applied loaders.
+       *
+       * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
+       * This means they are not resolved relative to the configuration file.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#module-loaders
+       */
+      loaders: [
+
+        /*
+         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+         *
+         * See: https://github.com/s-panferov/awesome-typescript-loader
+         */
+        {
+          test: /\.ts$/,
+          loaders: [
+            '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
+            'awesome-typescript-loader',
+            'angular2-template-loader'
+          ],
+          exclude: [/\.(spec|e2e)\.ts$/]
         },
-        include: [helpers.root('src')]
-      }
 
+        /*
+         * Json loader support for *.json files.
+         *
+         * See: https://github.com/webpack/json-loader
+         */
+        {
+          test: /\.json$/,
+          loader: 'json-loader'
+        },
+
+        {
+          test: /\.scss$/,
+          exclude: /node_modules/,
+          loaders: [ 'raw-loader', 'sass-loader' ]
+        },
+
+        {
+          test: /\.(woff2?|ttf|eot|svg)$/,
+          loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]'
+        },
+
+        /* Raw loader support for *.html
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.html$/,
+          loader: 'raw-loader',
+          exclude: [ helpers.root('src/index.html') ]
+        }
+
+      ]
+
+    },
+
+    sassLoader: {
+      precision: 10
+    },
+
+    /*
+     * Add additional plugins to the compiler.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#plugins
+     */
+    plugins: [
+      new AssetsPlugin({
+        path: helpers.root('dist'),
+        filename: 'webpack-assets.json',
+        prettyPrint: true
+      }),
+
+      /*
+       * Plugin: ForkCheckerPlugin
+       * Description: Do type checking in a separate process, so webpack don't need to wait.
+       *
+       * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
+       */
+      new ForkCheckerPlugin(),
+
+      /*
+       * Plugin: CommonsChunkPlugin
+       * Description: Shares common code between the pages.
+       * It identifies common modules and put them into a commons chunk.
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+       * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
+       */
+      new webpack.optimize.CommonsChunkPlugin({
+        name: [ 'polyfills', 'vendor' ].reverse()
+      }),
+
+      /*
+       * Plugin: CopyWebpackPlugin
+       * Description: Copy files and directories in webpack.
+       *
+       * Copies project static assets.
+       *
+       * See: https://www.npmjs.com/package/copy-webpack-plugin
+       */
+      new CopyWebpackPlugin([
+        {
+          from: 'src/assets',
+          to: 'assets'
+        },
+        {
+          from: 'node_modules/webtorrent/webtorrent.min.js',
+          to: 'assets/webtorrent'
+        }
+      ]),
+
+      /*
+       * Plugin: HtmlWebpackPlugin
+       * Description: Simplifies creation of HTML files to serve your webpack bundles.
+       * This is especially useful for webpack bundles that include a hash in the filename
+       * which changes every compilation.
+       *
+       * See: https://github.com/ampedandwired/html-webpack-plugin
+       */
+      new HtmlWebpackPlugin({
+        template: 'src/index.html',
+        chunksSortMode: 'dependency'
+      }),
+
+      new WebpackNotifierPlugin({ alwaysNotify: true })
     ],
 
     /*
-     * An array of automatically applied loaders.
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
      *
-     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
+     * See: https://webpack.github.io/docs/configuration.html#node
-     * This means they are not resolved relative to the configuration file.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#module-loaders
      */
-    loaders: [
+    node: {
-
+      global: 'window',
-      /*
+      crypto: 'empty',
-       * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+      fs: 'empty',
-       *
+      events: true,
-       * See: https://github.com/s-panferov/awesome-typescript-loader
+      module: false,
-       */
+      clearImmediate: false,
-      {
+      setImmediate: false
-        test: /\.ts$/,
+    }
-        loaders: [
-          'awesome-typescript-loader',
-          'angular2-template-loader',
-          '@angularclass/hmr-loader'
-        ],
-        exclude: [/\.(spec|e2e)\.ts$/]
-      },
-
-      /*
-       * Json loader support for *.json files.
-       *
-       * See: https://github.com/webpack/json-loader
-       */
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
-
-      {
-        test: /\.scss$/,
-        exclude: /node_modules/,
-        loaders: [ 'raw-loader', 'sass-loader' ]
-      },
-
-      {
-        test: /\.(woff2?|ttf|eot|svg)$/,
-        loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]'
-      },
-
-      /* Raw loader support for *.html
-       * Returns file content as string
-       *
-       * See: https://github.com/webpack/raw-loader
-       */
-      {
-        test: /\.html$/,
-        loader: 'raw-loader',
-        exclude: [ helpers.root('src/index.html') ]
-      }
-
-    ]
-
-  },
-
-  sassLoader: {
-    precision: 10
-  },
-
-  /*
-   * Add additional plugins to the compiler.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#plugins
-   */
-  plugins: [
-
-    /*
-     * Plugin: ForkCheckerPlugin
-     * Description: Do type checking in a separate process, so webpack don't need to wait.
-     *
-     * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
-     */
-    new ForkCheckerPlugin(),
-
-    /*
-     * Plugin: CommonsChunkPlugin
-     * Description: Shares common code between the pages.
-     * It identifies common modules and put them into a commons chunk.
-     *
-     * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
-     * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
-     */
-    new webpack.optimize.CommonsChunkPlugin({
-      name: [ 'polyfills', 'vendor' ].reverse()
-    }),
-
-    /*
-     * Plugin: CopyWebpackPlugin
-     * Description: Copy files and directories in webpack.
-     *
-     * Copies project static assets.
-     *
-     * See: https://www.npmjs.com/package/copy-webpack-plugin
-     */
-    new CopyWebpackPlugin([
-      {
-        from: 'src/assets',
-        to: 'assets'
-      },
-      {
-        from: 'node_modules/webtorrent/webtorrent.min.js',
-        to: 'assets/webtorrent'
-      }
-    ]),
-
-    /*
-     * Plugin: HtmlWebpackPlugin
-     * Description: Simplifies creation of HTML files to serve your webpack bundles.
-     * This is especially useful for webpack bundles that include a hash in the filename
-     * which changes every compilation.
-     *
-     * See: https://github.com/ampedandwired/html-webpack-plugin
-     */
-    new HtmlWebpackPlugin({
-      template: 'src/index.html',
-      chunksSortMode: 'dependency'
-    }),
-
-    new WebpackNotifierPlugin({ alwaysNotify: true })
-  ],
-
-  /*
-   * Include polyfills or mocks for various node stuff
-   * Description: Node configuration
-   *
-   * See: https://webpack.github.io/docs/configuration.html#node
-   */
-  node: {
-    global: 'window',
-    crypto: 'empty',
-    fs: 'empty',
-    events: true,
-    module: false,
-    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({
+    // new CompressionPlugin({
-      regExp: /\.css$|\.html$|\.js$|\.map$/,
+    //   regExp: /\.css$|\.html$|\.js$|\.map$/,
-      threshold: 2 * 1024
+    //   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": "^1.2.0",
-    "@angularclass/hmr-loader": "^1.0.1",
+    "@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'})
 }