Webpack update

.gitignore

@@ -11,7 +11,7 @@ showcase/theming/*.js
 *.map
 
 # production showcase bundle
-prod
+dist
 
 # distribution resources
 resources/**/*.css

config/helpers.js

@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;

config/webpack.common.js

@@ -1,19 +1,18 @@
 var webpack = require("webpack");
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var helpers = require('./helpers');
 
 module.exports = {
     entry: {
         'polyfills': './showcase/polyfills.ts',
         'vendor': './showcase/vendor.ts',
-        'application': './showcase/main.ts'
-    },
-    output: {
-        path: __dirname,
-        filename: './dist/[name].js',
-        chunkFilename: './dist/[id].js'
+        'app': './showcase/main.ts'
     },
+
     resolve: {
-        extensions: ['', '.ts', '.js']
+      extensions: ['.ts', '.js']
     },
+
     module: {
         loaders: [
             {
@@ -22,9 +21,10 @@ module.exports = {
             }
         ]
     },
+
     plugins: [
         new webpack.optimize.CommonsChunkPlugin({
-            name: ['application', 'vendor', 'polyfills']
+            name: ['app', 'vendor', 'polyfills']
         })
     ]
 };

config/webpack.dev.js

@@ -1,7 +1,17 @@
 var webpackMerge = require('webpack-merge');
 var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
 
 module.exports = webpackMerge(commonConfig, {
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+      path: helpers.root('dist'),
+      publicPath: 'http://localhost:8080/',
+      filename: '[name].js',
+      chunkFilename: '[id].chunk.js'
+    },
+
     devServer: {
         historyApiFallback: true,
         stats: 'minimal'

config/webpack.prod.js

@@ -1,26 +1,37 @@
 var webpack = require('webpack');
 var webpackMerge = require('webpack-merge');
 var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
 
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = webpackMerge(commonConfig, {
+    devtool: 'source-map',
+
+    output: {
+      path: helpers.root('dist'),
+      publicPath: '/',
+      filename: '[name].[hash].js',
+      chunkFilename: '[id].[hash].chunk.js'
+    },
+
     plugins: [
-        new webpack.NoErrorsPlugin(),
-        new webpack.optimize.DedupePlugin(),
-        new webpack.optimize.UglifyJsPlugin({
-          beautify: false,
-          mangle: {screw_ie8: true, keep_fnames: true},
-          compress: {screw_ie8: true},
-          comments: false,
-          compressor: {
-              warnings: false
-          } 
-        }),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        })
+      new webpack.NoEmitOnErrorsPlugin(),
+      new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+        mangle: {
+          keep_fnames: true
+        }
+      }),
+      new ExtractTextPlugin('[name].[hash].css'),
+      new webpack.DefinePlugin({
+        'process.env': {
+          'ENV': JSON.stringify(ENV)
+        }
+      }),
+      new webpack.LoaderOptionsPlugin({
+        htmlLoader: {
+          minimize: false // workaround for ng2
+        }
+      })
     ]
 });

index.html

@@ -85,10 +85,6 @@
                 </div>
             </div>
         </primeng-showcase>
-
-        <script src="dist/polyfills.js"></script>
-        <script src="dist/vendor.js"></script>        
-        <script src="dist/application.js"></script>
     </body>
 
 </html>

package.json

@@ -27,8 +27,9 @@
     "gulp-uglifycss": "^1.0.6",
     "ts-loader": "^0.9.5",
     "typescript": "^2.1.6",
-    "webpack": "^1.13.1",
-    "webpack-merge": "^0.14.0",
-    "webpack-dev-server": "^1.16.2"
+    "html-webpack-plugin": "^2.16.1",
+    "webpack": "2.2.1",
+    "webpack-dev-server": "2.4.1",
+    "webpack-merge": "^3.0.0"
   }
 }

showcase/polyfills.ts

@@ -1,19 +1,11 @@
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
-import 'core-js/es6/weak-map';
-import 'core-js/es6/weak-set';
-import 'core-js/es6/typed';
-import 'core-js/es6/reflect';
+import 'core-js/es6';
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+require('zone.js/dist/zone');
+
+if (process.env.ENV === 'production') {
+  // Production
+} else {
+  // Development and test
+  Error['stackTraceLimit'] = Infinity;
+  require('zone.js/dist/long-stack-trace-zone');
+}