Merge branch 'feature/Migrate_Typescript_Webpack' into develop

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
@@ -21,10 +26,13 @@ Build a production release
 npm install
 npm run build:prod
 ```
-Bundled files are releases into `dist` folder
+After build phase, those files are generated into the `dist` folder:
+- `app.bundle.js` - contains the core of the application. From the entry point `src/index.ts`
+- `vendor.bundle.js` - contains the ve
 
 ## TODO
 
 - [-] Add samples (Jquery integration for example..)
 - [-] Setup a webpack-dev-server
-- [-] Setup VSCode debuug to match webpack-dev-server
+- [-] Setup VSCode debuug to match webpack-dev-server
+- [-] Setup a webpack common configuration and use webpack-merge

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;

jsconfig.json

@@ -8,9 +8,6 @@
 	},
 	"exclude": [
 		"node_modules",
-		"bower_components",
-		"jspm_packages",
-		"tmp",
-		"temp"
+		"dist"
 	]
 }

package.json

@@ -8,9 +8,9 @@
     "webpack": "webpack",
     "build": "npm run build:dev",
     "prebuild:dev": "npm run rimraf -- dist",
-    "build:dev": "webpack --config config/webpack/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
+    "build:dev": "webpack --config config/webpack/webpack.dev.js --progress --profile --color --display-error-details --display-cached",
     "prebuild:prod": "npm run rimraf -- dist",
-    "build:prod": "webpack --config config/webpack/webpack.prod.js  --progress --profile --colors --display-error-details --display-cached --bail",
+    "build:prod": "webpack --config config/webpack/webpack.prod.js  --progress --profile --color --display-error-details --display-cached --bail",
     "test": "echo \"Error: no test specified\" && exit 1",
     "postinstall": "typings i"
   },
@@ -31,9 +31,9 @@
     "ts-loader": "^0.8.2",
     "tslint": "^3.13.0",
     "tslint-loader": "^2.1.5",
-    "typescript": "^1.8.10",
+    "typescript": "^2.0.0",
     "typings": "^1.3.2",
-    "webpack": "^1.13.1"
+    "webpack": "^2.1.0-beta.20"
   },
   "dependencies": {
     "lodash": "^4.14.1"

src/index.ts

@@ -2,4 +2,6 @@ export default class Main {
     constructor() {
         console.log('Typescript Webpack starter launched');
     }
-}
+}
+
+let start = new Main();

tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "commonjs",    
+    "module": "es6",
+    "moduleResolution": "node",
     "sourceMap": true
   },
   "exclude": [