chore(dev) ~ moving scripts to head with defer

Author: katallaxie

config/webpack.common.js

@@ -11,11 +11,13 @@ const helpers = require('./helpers');
 // problem with copy-webpack-plugin
 const AssetsPlugin = require('assets-webpack-plugin');
 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
+const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 const HtmlElementsPlugin = require('./html-elements-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 
 /*
  * Webpack Constants
@@ -173,7 +175,7 @@ module.exports = function (options) {
        * 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({
+      new CommonsChunkPlugin({
         name: ['polyfills', 'vendor'].reverse()
       }),
 
@@ -198,15 +200,12 @@ module.exports = function (options) {
        *
        * See: https://www.npmjs.com/package/copy-webpack-plugin
        */
-      new CopyWebpackPlugin([
-        {
-          from: 'src/assets',
-          to: 'assets',
-        },
-        {
-          from: 'src/meta',
-        },
-      ]),
+      new CopyWebpackPlugin([{
+        from: 'src/assets',
+        to: 'assets',
+      }, {
+        from: 'src/meta',
+      }, ]),
 
 
       /*
@@ -221,7 +220,19 @@ module.exports = function (options) {
         template: 'src/index.html',
         title: METADATA.title,
         chunksSortMode: 'dependency',
-        metadata: METADATA
+        metadata: METADATA,
+        inject: 'head'
+      }),
+
+      /*
+       * Plugin: ScriptExtHtmlWebpackPlugin
+       * Description: Enhances html-webpack-plugin functionality
+       * with different deployment options for your scripts including:
+       *
+       * See: https://github.com/numical/script-ext-html-webpack-plugin
+       */
+      new ScriptExtHtmlWebpackPlugin({
+        defaultAttribute: 'defer'
       }),
 
       /*

package.json

@@ -112,6 +112,7 @@
     "protractor": "^4.0.9",
     "raw-loader": "0.5.1",
     "rimraf": "^2.5.2",
+    "script-ext-html-webpack-plugin": "^1.3.2",
     "source-map-loader": "^0.1.5",
     "string-replace-loader": "1.0.5",
     "style-loader": "^0.13.1",