Adding hot reload to webpack.

Author: Tom Manion

gulp/serve.js

@@ -1,20 +1,3 @@
 var gulp = require('gulp');
-var webpack = require('webpack-stream');
-var webpackConfig = require('../webpack.config.js');
-var browserSync = require('browser-sync');
-var browserSyncSpa = require('browser-sync-spa');
 
-browserSync.use(browserSyncSpa({
-  selector: '[ng-app]'// Only needed for angular apps
-}));
-
-gulp.task('serve', ['webpack', 'watch'], function() {
-	var server = {
-		baseDir: ['./', 'src/public']
-	};
-	browserSync.instance = browserSync.init({
-		startPath: '/',
-		server: server,
-		browser: 'default'
-	});
-});
+gulp.task('serve', ['webpack']);

gulp/webpack.js

@@ -1,10 +1,46 @@
-var gulp = require('gulp');
-var webpack = require('webpack-stream');
-var webpackConfig = require('../webpack.config.js');
-var browserSync = require('browser-sync');
-
-gulp.task('webpack', ['clean'], function() {
-  return gulp.src(webpackConfig.entry.app)
-    .pipe(webpack(webpackConfig))
-    .pipe(gulp.dest(webpackConfig.output.path));
-});
+var gulp             = require('gulp');
+var gutil            = require('gulp-util');
+var WebpackDevServer = require('webpack-dev-server');
+var webpack          = require('webpack');
+var path             = require('path');
+var config           = require('../webpack.config');
+
+
+gulp.task('webpack-dev-server', function(callback) {
+  var server = new WebpackDevServer(webpack(config), {
+    publicPath: '/__build__/',
+    contentBase: 'src/public',
+
+    // Toggle this to enable _in code_ hot module replacement.
+    // See hot-module.js / css for an example.  If you're looking
+    // to simply update css / js, set to false for a sufficent enough
+    // page refresh.  Otherwise you will need to wrap js requires
+    // in the hot module loader accept callback in `app.js`.
+    hot: true,
+    inline: true,
+    noInfo: true,
+    quiet: true,
+    stats: { colors: true },
+    watchDelay: 3001
+  });
+
+  server.listen(8080, "localhost", function() {});
+
+  gutil.log('[webpack-dev-server]',
+    'http://localhost:8080/');
+
+  callback();
+});
+
+gulp.task('webpack', ['clean', 'webpack-dev-server'], function (callback) {
+  webpack(config, function (err, stats) {
+    if (err) {
+      throw new gutil.PluginError('webpack', err);
+    }
+
+    gutil.log('[webpack]', stats.toString({
+      colors: true
+    }));
+  });
+});
+

package.json

@@ -46,6 +46,7 @@
     "expose-loader": "^0.7.0",
     "file-loader": "^0.8.1",
     "gulp-clean": "^0.3.1",
+    "gulp-util": "^3.0.6",
     "imports-loader": "^0.6.3",
     "json-loader": "^0.5.1",
     "karma": "^0.13.3",

src/app/bootstrap.ts

@@ -76,3 +76,18 @@ bootstrap(
     platformInjectables
   ]
 );
+
+if(module.hot) {
+  module.hot.accept(function() {
+    bootstrap(
+      // Top Level Component
+      App,
+
+      // AppInjector
+      [
+        universalInjectables,
+        platformInjectables
+      ]
+    );
+  });
+}

src/app/components/home/home.ts

@@ -34,4 +34,4 @@ export class Home {
   constructor() {
 
   }
-}
+}

webpack.config.js

@@ -25,17 +25,18 @@ var BannerPlugin = webpack.BannerPlugin;
 var config = {
   devtool: 'source-map',
   // devtool: 'eval',
-
+  watch: true,
   debug: true,
   cache: true,
   // our Development Server configs
-  devServer: {
+  /*devServer: {
     inline: true,
     colors: true,
     historyApiFallback: true,
     contentBase: 'src/public',
-    publicPath: '/__build__'
-  },
+    publicPath: '/__build__',
+    hot: true
+  },*/
 
   //
   entry: {
@@ -44,27 +45,24 @@ var config = {
       'zone.js',
       'reflect-metadata',
       'rtts_assert/rtts_assert',
-      'angular2/angular2'
+      'angular2/angular2'      
     ],
     'app': [
       // App
-
-      /*
-       * include any 3rd party js lib here
-       */
-
+      'webpack-dev-server/client?http://localhost:8080',
+      'webpack/hot/dev-server',
       './src/app/bootstrap'
     ]
   },
 
   // Config for our build files
   output: {
     path: root('__build__'),
-    filename: '[name].js',
+    filename: 'app.js',
     // filename: '[name].[hash].js',
-    sourceMapFilename: '[name].js.map',
-    chunkFilename: '[id].chunk.js'
-      // publicPath: 'http://mycdn.com/'
+    sourceMapFilename: 'app.js.map',
+    chunkFilename: '[id].chunk.js',
+    publicPath: '/__build__/'
   },
 
   resolve: {
@@ -129,8 +127,6 @@ var config = {
       /rtts_assert\/src\/rtts_assert/
     ]
   },
-
-  // plugins: plugins, // see below
   context: __dirname,
   stats: {
     colors: true,
@@ -180,9 +176,9 @@ var environment_plugins = {
       })
   ],
 
-    development: [
+  development: [
     /* Dev Plugin */
-    // new webpack.HotModuleReplacementPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
   ]
 
   } //env
@@ -203,6 +199,7 @@ var combine_common_chunks = commons_chunks_plugins.map(function (config) {
   return new CommonsChunkPlugin(config);
 });
 
+console.log('NODE_ENV', NODE_ENV);
 // conbine everything
 config.plugins = [].concat(combine_common_chunks, environment_plugins.all, environment_plugins[NODE_ENV]);