alexjoverm · alexjoverm · Mar 17, 2017 · Mar 12, 2017 · Mar 15, 2017 · Mar 15, 2017
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+dist/index.html
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ npm install
  - `npm t`: Run test suite
  - `npm run test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)
  - `npm run test:prod`: Run linting + generate coverage
+ - `npm run dev`: Run a server at `localhost:8081` (default) for quick development
  - `npm run build`: Bundles code, create docs and generate typings
  - `npm run build:dev`: Same than `build`, but code is not minified
  - `npm run commit`: Commit using conventional commit style ([husky](https://github.com/typicode/husky) will tell you to use it if you haven't :wink:)

diff --git a/package.json b/package.json
@@ -16,7 +16,8 @@
   "scripts": {
     "lint": "tslint -e **/node_modules/** -e **/dist/** **/*.ts ",
     "prebuild": "rimraf dist && rimraf docs",
-    "build": "webpack -p",
+    "dev": "webpack-dev-server",
+    "build": "cross-env NODE_ENV=production webpack -p",
     "build:dev": "webpack",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -30,6 +31,7 @@
     "postinstall": "node tools/init"
   },
   "config": {
+    "devPort": "8081",
     "commitizen": {
       "path": "node_modules/cz-conventional-changelog"
     },
@@ -80,7 +82,9 @@
     "colors": "^1.1.2",
     "commitizen": "^2.9.5",
     "coveralls": "^2.11.15",
+    "cross-env": "^3.2.3",
     "cz-conventional-changelog": "^2.0.0",
+    "html-webpack-plugin": "^2.28.0",
     "husky": "^0.13.1",
     "jest": "^19.0.2",
     "lodash": "^4.17.4",
@@ -96,6 +100,7 @@
     "typedoc-webpack-plugin": "^1.1.3",
     "typescript": "^2.1.6",
     "validate-commit-msg": "^2.10.1",
-    "webpack": "^2.2.0"
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.4.1"
   }
 }
diff --git a/template/index.html b/template/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+</body>
+</html>
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -1,15 +1,58 @@
-import { join } from 'path'
+import { join, resolve } from 'path'
 const { camelCase } = require('lodash')
+const webpack = require("webpack")
 const { TsConfigPathsPlugin, CheckerPlugin } = require('awesome-typescript-loader')
 const TypedocWebpackPlugin = require('typedoc-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const env = process && process.env && process.env.NODE_ENV
+const serverPort = process.env.npm_package_config_devPort || 8081
+const dev = !(env && env === 'production')
 
 /**
  * Update this variable if you change your library name
  */
 const libraryName = '--libraryname--'
+const plugins = [
+  new CheckerPlugin(),
+  new TsConfigPathsPlugin(),
+  new HtmlWebpackPlugin({
+    inject: true,
+    title: libraryName,
+    filename: 'index.html',
+    template: join(__dirname, 'template/index.html'),
+    hash: true,
+    chunks: ['common', 'index']
+  })
+]
+
+let entry: string | string[] = [
+  // 'react-hot-loader/patch',
+  `webpack-dev-server/client?http://localhost:${serverPort}`,
+  // bundle the client for webpack-dev-servers and connect to the provided endpoint
+  'webpack/hot/only-dev-server',
+  // bundle the client for hot reloading
+  `./src/${libraryName}.ts`
+]
+
+if (dev === false) {
+  plugins.push(new TypedocWebpackPlugin(
+    {
+      theme: 'minimal',
+      out: 'docs',
+      target: 'es6',
+      ignoreCompilerErrors: true
+    },
+    'src'
+  ))
+  entry = join(__dirname, `src/${libraryName}.ts`)
+} else {
+  plugins.push(new webpack.HotModuleReplacementPlugin())
+}
 
 export default {
-  entry: join(__dirname, `src/${libraryName}.ts`),
+  entry: {
+    index: entry
+  },
   // Currently cheap-module-source-map is broken https://github.com/webpack/webpack/issues/4176
   devtool: 'source-map',
   output: {
@@ -33,17 +76,11 @@ export default {
       }
     ]
   },
-  plugins: [
-    new CheckerPlugin(),
-    new TsConfigPathsPlugin(),
-    new TypedocWebpackPlugin(
-      {
-        theme: 'minimal',
-        out: 'docs',
-        target: 'es6',
-        ignoreCompilerErrors: true
-      },
-      'src'
-    )
-  ]
+  plugins: plugins,
+  devServer: {
+    hot: true,
+    contentBase: resolve(__dirname, 'dist'),
+    port: serverPort,
+    publicPath: '/'
+  }
 }