- update webpack configs to match webpack 2 migration

Author: emyann

README.md

@@ -1,6 +1,11 @@
 # Typescript Webpack Starter
 >A damn simple ES6 and Typescript Starter kit using webpack for packaging. Perfect for bootstraping your javascript project regardless any framework.
 
+## Built upon
+
+- [x] [Webpack 2](https://webpack.github.io/docs/roadmap.html#2)
+- [x] [Typescript 2](https://blogs.msdn.microsoft.com/typescript/2016/07/11/announcing-typescript-2-0-beta/)
+
 # Getting started
 
 ## Clone Typescript Webpack Starter

config/webpack/webpack.dev.js

@@ -1,47 +1,56 @@
-var path = require("path");
-var webpack = require("webpack");
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 var config = {
-
+    devtool: 'cheap-eval-source-map',
+    context: path.resolve('./src'),
     entry: {
-        'vendor': './src/vendor.ts',
-        'app': './src/index.ts'
+        app: './index.ts',
+        vendor: './vendor.ts'
     },
-    debug: true,
-    devtool: 'source-map',
     output: {
-        path: path.resolve("dist"),
+        path: path.resolve('./dist'),
         filename: '[name].bundle.js',
         sourceMapFilename: '[name].map',
         devtoolModuleFilenameTemplate: function (info) {
             return "file:///" + info.absoluteResourcePath;
         }
     },
-    tslint: {
-        emitErrors: false,
-        failOnHint: false,
-        resourcePath: 'src'
-    },
-    resolve: {
-        extensions: ["", ".ts", ".js"]
-    },
     module: {
         preLoaders: [
             { test: /\.ts$/, exclude: ["node_modules"], loader: "tslint" }
         ],
         loaders: [
             { test: /\.ts$/, exclude: ["node_modules"], loader: 'ts-loader' },
             { test: /\.html$/, loader: "html" },
-            { test: /\.css$/, loader: "style-loader!css-loader" }
+            { test: /\.css$/, loaders: ['style', 'css'] }
         ]
     },
+    resolve: {
+        extensions: ["", ".ts", ".js"],
+        modules: [path.resolve('./src'), 'node_modules']
+    },
     plugins: [
         new HtmlWebpackPlugin({
             title: 'Typescript Webpack Starter',
             template: '!!ejs-loader!src/index.html'
-        })
-    ]
+        }),
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            minChunks: Infinity,
+            filename: 'vendor.bundle.js'
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {warnings: false},
+            output: {comments: false},
+            sourceMap: false
+        }),
+    ],
+    tslint: {
+        emitErrors: false,
+        failOnHint: false
+    },
 };
 
 module.exports = config;

config/webpack/webpack.prod.js

@@ -1,45 +1,56 @@
-var path = require("path");
-var webpack = require("webpack");
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 var config = {
-
+    devtool: 'source-map',
+    context: path.resolve('./src'),
     entry: {
-        'vendor': './src/vendor.ts',
-        'app': './src/index.ts'
+        app: './index.ts',
+        vendor: './vendor.ts'
     },
-    debug: true,
-    devtool: 'source-map',
     output: {
-        path: path.resolve("dist"),
+        path: path.resolve('./dist'),
         filename: '[name].bundle.js',
         sourceMapFilename: '[name].map',
         devtoolModuleFilenameTemplate: function (info) {
             return "file:///" + info.absoluteResourcePath;
         }
     },
-    tslint: {
-        emitErrors: false,
-        failOnHint: false,
-        resourcePath: 'src'
-    },
-    resolve: {
-        extensions: ["", ".ts", ".js"]
-    },
     module: {
         preLoaders: [
             { test: /\.ts$/, exclude: ["node_modules"], loader: "tslint" }
         ],
         loaders: [
-            { test: /\.ts$/,  exclude: ["node_modules"],loader: 'ts-loader' },
+            { test: /\.ts$/, exclude: ["node_modules"], loader: 'ts-loader' },
             { test: /\.html$/, loader: "html" },
-            { test: /\.css$/, loader: "style-loader!css-loader" }
+            { test: /\.css$/, loaders: ['style', 'css'] }
         ]
     },
+    resolve: {
+        extensions: ["", ".ts", ".js"],
+        modules: [path.resolve('./src'), 'node_modules']
+    },
     plugins: [
-        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
-        new HtmlWebpackPlugin({title: 'Typescript Webpack Starter'})
-    ]
+        new HtmlWebpackPlugin({
+            title: 'Typescript Webpack Starter',
+            template: '!!ejs-loader!src/index.html'
+        }),
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            minChunks: Infinity,
+            filename: 'vendor.bundle.js'
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: { warnings: false },
+            output: { comments: false },
+            sourceMap: true
+        }),
+    ],
+    tslint: {
+        emitErrors: false,
+        failOnHint: false
+    },
 };
 
 module.exports = config;