Implement hot-reloading without browser refresh. (#29)

* Add dynamic component loading
* Add webpack code-splitting
* Add manifest and vendor bundles

Author: Matt Levy

template/config/webpack.config.base.js

@@ -8,6 +8,7 @@ let config = {
   output: {
     path: helpers.root('/dist'),
     filename: 'js/[name].[hash].js',
+    chunkFilename: 'js/[name].[hash].js',
     publicPath: '/'
   },
   devtool: 'source-map',

template/config/webpack.config.prod.js

@@ -1,5 +1,6 @@
 const glob = require('glob'),
   path = require('path'),
+  CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'),
   UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'),
   HtmlWebpackPlugin = require('html-webpack-plugin'),
   CompressionPlugin = require('compression-webpack-plugin'),
@@ -72,6 +73,16 @@ webpackConfig.module.rules[0].options = {
 };
 
 webpackConfig.plugins = [...webpackConfig.plugins,
+  new CommonsChunkPlugin({
+    name: 'vendor',
+    minChunks: function(module){
+      return module.context && module.context.indexOf('node_modules') !== -1;
+    }
+  }),
+  new CommonsChunkPlugin({
+    name: 'manifest',
+    minChunks: Infinity
+  }),
   extractSass,
   purifyCss,
   new HtmlWebpackPlugin({
@@ -92,12 +103,12 @@ webpackConfig.plugins = [...webpackConfig.plugins,
     }
   }),
   new UglifyJsPlugin({
-    include: /\.min\.js$/,
+    include: /\.js$/,
     minimize: true
   }),
   new CompressionPlugin({
     asset: '[path].gz[query]',
-    test: /\.min\.js$/
+    test: /\.js$/
   }),
   new DefinePlugin({
     'process.env': env

template/package-lock.json

@@ -20,7 +20,7 @@
     "coverage:run": "cross-env NODE_ENV=development karma start karma.coverage.js",
     "dev": "webpack-dev-server --hot --inline",
     "lint": "tslint src/**/*.ts",
-    "serve": "http-server dist/ -o",
+    "serve": "http-server dist/ -g -o",
     "test": "cross-env NODE_ENV=development karma start karma.unit.js",
     "test:debug": "cross-env NODE_ENV=development karma start karma.debug.js",
     "test:watch": "cross-env NODE_ENV=development karma start karma.unit.js --singleRun=false --auto-watch"
@@ -37,6 +37,7 @@
     "@types/mocha": "~2.2.44",
     "@types/node": "~8.0.47",
     "@types/sinon": "~2.3.7",
+    "@types/webpack-env": "^1.13.2",
     "autoprefixer": "^7.1.6",
     "awesome-typescript-loader": "~3.3.0",
     "bootstrap-sass": "^3.3.7",
@@ -84,6 +85,7 @@
     "tslint-loader": "~3.5.3",
     "typescript": "~2.6.1",
     "url-loader": "^0.6.2",
+    "vue-hot-reload-api": "^2.2.0",
     "webpack": "~3.8.1",
     "webpack-dev-server": "~2.9.4"
   }

template/package.json

@@ -1,19 +1,26 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import { isHot, makeHot, reload } from './util/hot-reload';
+import { createRouter } from './router';
+
+const navbarComponent = () => import('./components/navbar').then(({ NavbarComponent }) => NavbarComponent);
+// const navbarComponent = () => import(/* webpackChunkName: 'navbar' */'./components/navbar').then(({ NavbarComponent }) => NavbarComponent);
 
 import './sass/main.scss';
 
-import { HomeComponent } from './components/home';
-import { AboutComponent } from './components/about';
-import { ListComponent } from './components/list';
-import { NavbarComponent } from './components/navbar';
+if (process.env.ENV === 'development' && isHot()) {
+  const navbarModuleId = './components/navbar';
 
-import { createRouter } from './router';
+  // first arguments for `module.hot.accept` and `require` methods have to be static strings
+  // see https://github.com/webpack/webpack/issues/5668
+  makeHot(navbarModuleId, navbarComponent,
+    module.hot.accept('./components/navbar', () => reload(navbarModuleId, (<any>require('./components/navbar')).NavbarComponent)));
+}
 
 new Vue({
   el: '#app-main',
   router: createRouter(),
   components: {
-    'navbar': NavbarComponent
+    'navbar': navbarComponent
   }
 });

template/src/main.ts

@@ -1,9 +1,30 @@
 import Vue from 'vue';
 import VueRouter, { Location, Route, RouteConfig } from 'vue-router';
+import { isHot, makeHot, reload } from './util/hot-reload';
 
 const homeComponent = () => import('./components/home').then(({ HomeComponent }) => HomeComponent);
 const aboutComponent = () => import('./components/about').then(({ AboutComponent }) => AboutComponent);
 const listComponent = () => import('./components/list').then(({ ListComponent }) => ListComponent);
+// const homeComponent = () => import(/* webpackChunkName: 'home' */'./components/home').then(({ HomeComponent }) => HomeComponent);
+// const aboutComponent = () => import(/* webpackChunkName: 'about' */'./components/about').then(({ AboutComponent }) => AboutComponent);
+// const listComponent = () => import(/* webpackChunkName: 'list' */'./components/list').then(({ ListComponent }) => ListComponent);
+
+if (process.env.ENV === 'development' && isHot()) {
+  const homeModuleId = './components/home';
+  const aboutModuleId = './components/about';
+  const listModuleId = './components/list';
+
+  // first arguments for `module.hot.accept` and `require` methods have to be static strings
+  // see https://github.com/webpack/webpack/issues/5668
+  makeHot(homeModuleId, homeComponent,
+    module.hot.accept('./components/home', () => reload(homeModuleId, (<any>require('./components/home')).HomeComponent)));
+
+  makeHot(aboutModuleId, aboutComponent,
+    module.hot.accept('./components/about', () => reload(aboutModuleId, (<any>require('./components/about')).AboutComponent)));
+
+  makeHot(listModuleId, listComponent,
+    module.hot.accept('./components/list', () => reload(listModuleId, (<any>require('./components/list')).ListComponent)));
+}
 
 Vue.use(VueRouter);
 

template/src/router.ts

@@ -0,0 +1,20 @@
+import Vue, { Component } from 'vue';
+import * as api from 'vue-hot-reload-api';
+
+export const isHot = () => module.hot;
+
+export async function makeHot(id: string, componentLoader: () => Promise<Component>, acceptFunc: void) {
+  if (isHot()) {
+    api.install(Vue);
+    if (!api.compatible) {
+      throw new Error('vue-hot-reload-api is not compatible with the version of Vue you are using.');
+    }
+
+    const loadedComponent = await componentLoader();
+    api.createRecord(id, loadedComponent);
+  }
+}
+
+export function reload(id: string, component: Component) {
+  api.reload(id, component);
+}

template/src/util/hot-reload.ts

@@ -0,0 +1,7 @@
+declare module 'vue-hot-reload-api' {
+  import Vue, { Component } from 'vue';
+  export function install(Vue): void;
+  export function compatible(): boolean;
+  export function createRecord(id: string, component: Component): void;
+  export function reload(id: string, component: Component): void;
+}