turn webpack middleware into middleware

fix HMR middleware, and some loopback boilerplate cleanup

README.md

@@ -1,3 +0,0 @@
-# My Application
-
-The project is generated by [LoopBack](http://loopback.io).

server/boot/webpack-dev.js

@@ -1,25 +0,0 @@
-const webpack = require('webpack');
-const webpackMiddleware = require('webpack-dev-middleware');
-const config = require('../config/webpack.dev');
-
-const isProduction = (process.env.NODE_ENV === 'production');
-
-module.exports = (app) => {
-  if (isProduction) return;
-
-  const compiler = webpack(config);
-  const middleware = webpackMiddleware(compiler, {
-    publicPath: config.output.publicPath,
-    contentBase: 'src',
-    stats: {
-      colors: true,
-      hash: false,
-      timings: true,
-      chunks: false,
-      chunkModules: false,
-      modules: false,
-    },
-  });
-
-  app.use(middleware);
-};

server/boot/webpack-hmr.js

@@ -1,13 +0,0 @@
-const webpack = require('webpack');
-const webpackHotMiddleware = require('webpack-hot-middleware');
-const config = require('../config/webpack.dev');
-
-const isProduction = (process.env.NODE_ENV === 'production');
-
-module.exports = (app) => {
-  if (isProduction) return;
-
-  const compiler = webpack(config);
-
-  app.use(webpackHotMiddleware(compiler));
-};

server/config/webpack.base.js

@@ -3,7 +3,7 @@ const path = require('path');
 const ROOT = path.resolve(__dirname, '..', '..');
 
 module.exports = {
-  entry: `${ROOT}/src/main.js`,
+  entry: [`${ROOT}/src/main.js`],
   output: {
     path: `${ROOT}/client`,
     publicPath: '/',

server/config/webpack.dev.js

@@ -7,7 +7,9 @@ const baseConfig = require('./webpack.base');
 const ROOT = path.resolve(__dirname, '..', '..');
 
 module.exports = merge(baseConfig, {
+  entry: ['webpack-hot-middleware/client'],
   plugins: [
+    // http://vue-loader.vuejs.org/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"development"',
@@ -23,5 +25,7 @@ module.exports = merge(baseConfig, {
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency',
     }),
+
+    new webpack.HotModuleReplacementPlugin(),
   ],
 });

server/config/webpack.prod.js

@@ -13,21 +13,26 @@ module.exports = merge(baseConfig, {
   },
   // add sourcemaps to production build
   devtool: '#source-map',
-  // http://vue-loader.vuejs.org/en/workflow/production.html
   plugins: [
+    // http://vue-loader.vuejs.org/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"',
       },
     }),
+
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false,
       },
     }),
+
     new webpack.LoaderOptionsPlugin({
       minimize: true,
     }),
+
+    // let webpack generate all your favicons and icons for you
+    // https://github.com/jantimon/favicons-webpack-plugin
     new FaviconsWebpackPlugin({
       logo: path.join(ROOT, 'src', 'assets', 'logo.png'),
       persistentCache: false,
@@ -45,6 +50,7 @@ module.exports = merge(baseConfig, {
         windows: false,
       },
     }),
+
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
@@ -60,7 +66,9 @@ module.exports = merge(baseConfig, {
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency',
     }),
+
     // split vendor js into its own file
+    // prevents hash from being updated whenever app bundle is updated
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks(module) {
@@ -73,8 +81,9 @@ module.exports = merge(baseConfig, {
         );
       },
     }),
-    // extract webpack runtime and module manifest to its own file in order to
+
-    // prevent vendor hash from being updated whenever app bundle is updated
+    // extract webpack runtime and module manifest into its own file
+    // prevents hash from being updated whenever app bundle is updated
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor'],

server/middleware.development.json

@@ -1,4 +1,12 @@
 {
+  "routes:before": {
+    "./middleware/webpack-dev": {
+      "params": { "enabled": true }
+    },
+    "./middleware/webpack-hmr": {
+      "params": { "enabled": true }
+    }
+  },
   "final:after": {
     "strong-error-handler": {
       "params": {

server/middleware.json

@@ -1,7 +1,4 @@
 {
-  "initial:before": {
-    "loopback#favicon": {}
-  },
   "initial": {
     "compression": {},
     "cors": {
@@ -33,6 +30,10 @@
   "session": {},
   "auth": {},
   "parse": {},
+  "routes:before": {
+    "./middleware/webpack-dev": {},
+    "./middleware/webpack-hmr": {}
+  },
   "routes": {
     "loopback#rest": {
       "paths": [

server/middleware/helpers/webpack.js

@@ -0,0 +1,9 @@
+const webpack = require('webpack');
+const config = require('../../config/webpack.dev');
+
+const compiler = webpack(config);
+
+module.exports = {
+  compiler,
+  config,
+};

server/middleware/webpack-dev.js

@@ -0,0 +1,23 @@
+const webpackMiddleware = require('webpack-dev-middleware');
+const webpack = require('./helpers/webpack');
+
+const isProduction = (process.env.NODE_ENV === 'production');
+
+module.exports = (params) => {
+  if (isProduction || params.enabled !== true) return (req, res, next) => next();
+
+  const middleware = webpackMiddleware(webpack.compiler, {
+    publicPath: webpack.config.output.publicPath,
+    contentBase: 'src',
+    stats: {
+      colors: true,
+      hash: false,
+      timings: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+    },
+  });
+
+  return (req, res, next) => middleware(req, res, next);
+};

server/middleware/webpack-hmr.js

@@ -0,0 +1,12 @@
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const webpack = require('./helpers/webpack');
+
+const isProduction = (process.env.NODE_ENV === 'production');
+
+module.exports = (params) => {
+  if (isProduction || params.enabled !== true) return (req, res, next) => next();
+
+  const middleware = webpackHotMiddleware(webpack.compiler);
+
+  return (req, res, next) => middleware(req, res, next);
+};

server/server.js

@@ -1,20 +1,9 @@
 /* eslint-disable no-console */
-const path = require('path');
 const loopback = require('loopback');
 const boot = require('loopback-boot');
 
 const app = module.exports = loopback();
 
-const bootOptions = {
-  appRootDir: path.resolve(__dirname),
-  bootScripts: [
-    'boot/authentication.js',
-    'boot/webpack-dev.js',
-    'boot/webpack-hmr.js',
-    'boot/root.js',
-  ],
-};
-
 // start the webserver
 app.start = () => app.listen(() => {
   app.emit('started');
@@ -30,7 +19,7 @@ app.start = () => app.listen(() => {
 
 // Bootstrap the application, configure models, datasources and middleware.
 // Sub-apps like REST API are mounted via boot scripts.
-boot(app, bootOptions, (err) => {
+boot(app, __dirname, (err) => {
   if (err) throw err;
 
   // start the server if `$ node server.js`

src/main.js

@@ -1,3 +1,3 @@
 /* eslint-env browser */
 
-document.querySelector('#app').innerHTML = 'Hello from main.js!';
+document.querySelector('#app').innerHTML = 'Hello, from main.js!';