feat(dev-server): Add webpack-dashboard plugin to dev configuration

Author: emyann

.vscode/launch.json

@@ -1,14 +1,6 @@
 {
     "version": "0.2.0",
     "configurations": [
-         {
-            "name": "Launch with sourcemaps",
-            "type": "chrome",
-            "request": "launch",
-            "url": "http://localhost/mypage.html",
-            "webRoot": "${workspaceRoot}/dist",
-            "sourceMaps": true
-        },
         {
             "name": "Attach with sourcemaps",
             "type": "chrome",
@@ -17,6 +9,7 @@
             "port": 9222,
             "diagnosticLogging": true,
             "webRoot": "${workspaceRoot}/dist"
+
         }
     ]
 }

README.md

@@ -12,25 +12,24 @@
 ```bash
 git clone https://github.com/emyann/typescript-webpack-starter.git
 cd typescript-webpack-starter
+# Install the dependencies
+npm install
 ```
 
 ## Run
 Run a Webpack dev server 
 ```bash
-npm install
 npm run server
 ```
 
 ## Build Only
 Build a development release
 ```bash
-npm install
 npm run build
 ```
 
 Build a production release
 ```bash
-npm install
 npm run build:prod
 ```
 After build phase, 3 files are generated into the `dist` folder:
@@ -40,7 +39,7 @@ After build phase, 3 files are generated into the `dist` folder:
 
 ## TODO
 
-- [_] Add TODO example
-- [_] Setup VSCode debug to match webpack-dev-server
-- [_] Setup a webpack common configuration and use webpack-merge
-- [_] Setup unit tests
+- [ ] Add TODO example
+- [ ] Setup VSCode debug to match webpack-dev-server
+- [ ] Setup a webpack common configuration and use webpack-merge
+- [ ] Setup unit tests

config/webpack/webpack.dev.js

@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const DashboardPlugin = require('webpack-dashboard/plugin');
 
 var config = {
     devtool: 'cheap-eval-source-map',
@@ -46,6 +47,7 @@ var config = {
             output: {comments: false},
             sourceMap: false
         }),
+         new DashboardPlugin()
     ],
     tslint: {
         emitErrors: false,

package.json

@@ -13,7 +13,7 @@
     "prebuild:prod": "npm run rimraf -- dist",
     "build:prod": "webpack --config config/webpack/webpack.prod.js  --progress --profile --color --display-error-details --display-cached --bail",
     "server": "npm run server:dev",
-    "server:dev": "webpack-dev-server --config config/webpack/webpack.dev.js --port 3000 --host 0.0.0.0 --hot --progress --profile --watch --inline --content-base dist/",
+    "server:dev": "webpack-dashboard -- webpack-dev-server --config config/webpack/webpack.dev.js --port 3000 --host 0.0.0.0 --hot --inline --progress --profile --watch --content-base dist/",
     "test": "echo \"Error: no test specified\" && exit 1",
     "postinstall": "typings i"
   },
@@ -37,6 +37,7 @@
     "typescript": "^2.0.0",
     "typings": "^1.3.2",
     "webpack": "^2.1.0-beta.20",
+    "webpack-dashboard": "^0.1.8",
     "webpack-dev-server": "^1.15.0"
   },
   "dependencies": {