shrink module config & export router for module

Author: davidmeirlevy

template/config/webpack.config.module.js

@@ -1,28 +1,6 @@
-const glob = require('glob'),
-  path = require('path'),
-  CompressionPlugin = require('compression-webpack-plugin'),
-  ExtractTextPlugin = require('extract-text-webpack-plugin'),
-  PurifyCSSPlugin = require('purifycss-webpack'),
-  autoprefixer = require('autoprefixer'),
-  webpackConfig = require('./webpack.config.base'),
-  helpers = require('./helpers'),
-  DefinePlugin = require('webpack/lib/DefinePlugin'),
-  env = require('../environment/prod.env');
-
-const extractSass = new ExtractTextPlugin({
-  filename: 'css/[name].[contenthash].css',
-  disable: process.env.NODE_ENV === 'development'
-});
-
-const purifyCss = new PurifyCSSPlugin({
-  paths: glob.sync(path.join(__dirname, '../src/**/*.html')),
-  purifyOptions: {
-    info: true,
-    whitelist: []
-  }
-});
-
-webpackConfig.entry.main = helpers.root('/src/module.ts');
+const
+  webpackConfig = require('./webpack.config.prod'),
+  helpers = require('./helpers');
 
 webpackConfig.output = {
   path: helpers.root('/dist'),
@@ -40,62 +18,4 @@ webpackConfig.externals = {
   'vue-router': 'vue-router'
 };
 
-webpackConfig.module.rules = [...webpackConfig.module.rules,
-  {
-    test: /\.scss$/,
-    use: extractSass.extract({
-      use: [{
-        loader: 'css-loader',
-        options: {
-          minimize: true,
-          sourceMap: true,
-          importLoaders: 2
-        }
-      },
-        {
-          loader: 'postcss-loader',
-          options: {
-            plugins: () => [autoprefixer]
-          }
-        },
-        {
-          loader: 'sass-loader',
-          options: {
-            outputStyle: 'expanded',
-            sourceMap: true,
-            sourceMapContents: true
-          }
-        }
-      ],
-      // use style-loader in development
-      fallback: 'style-loader'
-    })
-  },
-  {
-    test: /\.(jpg|png|gif)$/,
-    loader: 'file-loader?name=assets/img/[name].[ext]'
-  },
-  {
-    test: /\.(eot|svg|ttf|woff|woff2)$/,
-    loader: 'file-loader?name=fonts/[name].[ext]'
-  }
-];
-
-// ensure ts lint fails the build
-webpackConfig.module.rules[0].options = {
-  failOnHint: true
-};
-
-webpackConfig.plugins = [...webpackConfig.plugins,
-  extractSass,
-  purifyCss,
-  new CompressionPlugin({
-    asset: '[path].gz[query]',
-    test: /\.min\.js$/
-  }),
-  new DefinePlugin({
-    'process.env': env
-  })
-];
-
 module.exports = webpackConfig;

template/package.json

@@ -11,16 +11,16 @@
     "npm": ">=3"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production npm run clean && npm run test && npm run compile",
-    "module": "cross-env NODE_ENV=production npm run clean && npm run test && npm run compile:module",
+    "prebuild:production": "cross-env NODE_ENV=production npm run clean && npm run test",
+    "build": "npm run prebuild:production && npm run compile",
+    "module": "npm run prebuild:production && npm run compile:module",
     "build:parts": "npm run sass && npm run compile",
     "ci:teamcity": "karma --env=tc start karma.coverage.js && npm run coverage:remap",
     "ci:jenkins": "karma --env=jk start karma.coverage.js && npm run coverage:remap",
     "clean": "rimraf dist && rimraf coverage",
     "compile": "webpack --config config/webpack.config.prod.js",
     "compile:module": "webpack --config config/webpack.config.module.js",
     "prepublishOnly": "npm run module",
-    "node-module": "webpack --config config/webpack.config.module.js",
     "coverage": "npm run coverage:run && npm run coverage:remap && npm run coverage:open",
     "coverage:open": "opn coverage/html-ts/index.html",
     "coverage:remap": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html-ts -t html",

template/src/main.ts

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import { makeHot, reload } from './util/hot-reload';
 import { createRouter } from './router';
 
@@ -13,7 +12,7 @@ if (process.env.ENV === 'development' && module.hot) {
   // 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)));
+    module.hot.accept(navbarModuleId, () => reload(navbarModuleId, (<any>require(navbarModuleId)).NavbarComponent)));
 }
 
 new Vue({

template/src/module.ts

@@ -17,30 +17,33 @@ if (process.env.ENV === 'development' && module.hot) {
   // 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)));
+    module.hot.accept(homeModuleId, () => reload(homeModuleId, (<any>require(homeModuleId)).HomeComponent)));
 
   makeHot(aboutModuleId, aboutComponent,
-    module.hot.accept('./components/about', () => reload(aboutModuleId, (<any>require('./components/about')).AboutComponent)));
+    module.hot.accept(aboutModuleId, () => reload(aboutModuleId, (<any>require(aboutModuleId)).AboutComponent)));
 
   makeHot(listModuleId, listComponent,
-    module.hot.accept('./components/list', () => reload(listModuleId, (<any>require('./components/list')).ListComponent)));
+    module.hot.accept(listModuleId, () => reload(listModuleId, (<any>require(listModuleId)).ListComponent)));
 }
 
-Vue.use(VueRouter);
-
-export const createRoutes: () => RouteConfig[] = () => [
-  {
-    path: '/',
+export function createRoutes(prefix: string = ''): RouteConfig[] {
+  return [{
+    path: prefix + '/',
     component: homeComponent,
   },
-  {
-    path: '/about',
-    component: aboutComponent,
-  },
-  {
-    path: '/list',
-    component: listComponent,
-  }
-];
+    {
+      path: prefix + '/about',
+      component: aboutComponent,
+    },
+    {
+      path: prefix + '/list',
+      component: listComponent,
+    }
+  ];
+}
+
 
-export const createRouter = () => new VueRouter({ mode: 'history', routes: createRoutes() });
+export const createRouter = () => {
+  Vue.use(VueRouter);
+  return new VueRouter({ mode: 'history', routes: createRoutes() });
+};