setup webpack

server/boot/authentication.js

@@ -1,5 +1,3 @@
-'use strict';
-
 module.exports = function enableAuthentication(server) {
   // enable authentication
   // server.enableAuth();

server/boot/root.js

@@ -1,7 +1,7 @@
 const pingRoute = require('./routes/ping');
 
-module.exports = function(server) {
-  var router = server.loopback.Router();
+module.exports = (server) => {
+  const router = server.loopback.Router();
 
   // Install a `/` route that returns server status
   // router.get('/', server.loopback.status());

server/boot/webpack-dev.js

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,45 @@
+const path = require('path');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+
+module.exports = {
+  entry: `${ROOT}/src/main.js`,
+  output: {
+    path: `${ROOT}/client`,
+    publicPath: '/',
+    filename: 'js/[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          // vue-loader options go here
+        },
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]',
+        },
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      src: `${ROOT}/src`,
+    },
+  },
+  devtool: '#eval-source-map',
+};

server/config/webpack.dev.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const baseConfig = require('./webpack.base');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+
+module.exports = merge(baseConfig, {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"development"',
+      },
+    }),
+    // 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
+    new HtmlWebpackPlugin({
+      filename: path.join(ROOT, 'client', 'index.html'),
+      template: path.join(ROOT, 'src', 'index.html'),
+      inject: true,
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency',
+    }),
+  ],
+});

server/config/webpack.prod.js

@@ -0,0 +1,83 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const baseConfig = require('./webpack.base');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+
+module.exports = merge(baseConfig, {
+  output: {
+    filename: 'js/[name].[chunkhash].js',
+  },
+  // add sourcemaps to production build
+  devtool: '#source-map',
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+      },
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    }),
+    new FaviconsWebpackPlugin({
+      logo: path.join(ROOT, 'src', 'assets', 'logo.png'),
+      persistentCache: false,
+      emitStats: false,
+      icons: {
+        android: true,
+        appleIcon: true,
+        appleStartup: false,
+        coast: false,
+        favicons: true,
+        firefox: false,
+        opengraph: true,
+        twitter: true,
+        yandex: false,
+        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
+    new HtmlWebpackPlugin({
+      filename: path.join(ROOT, 'client', 'index.html'),
+      template: path.join(ROOT, 'src', 'index.html'),
+      inject: true,
+      minify: {
+        removeComments: true,
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency',
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks(module) {
+        // any required modules inside node_modules are extracted to vendor
+        const nodeModules = path.join(ROOT, 'node_modules');
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(nodeModules) === 0
+        );
+      },
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor'],
+    }),
+  ],
+});

server/server.js

@@ -1,29 +1,38 @@
-'use strict';
+/* eslint-disable no-console */
+const path = require('path');
+const loopback = require('loopback');
+const boot = require('loopback-boot');
 
-var loopback = require('loopback');
-var boot = require('loopback-boot');
+const app = module.exports = loopback();
 
-var app = module.exports = loopback();
-
-app.start = function() {
-  // start the web server
-  return app.listen(function() {
-    app.emit('started');
-    var baseUrl = app.get('url').replace(/\/$/, '');
-    console.log('Web server listening at: %s', baseUrl);
-    if (app.get('loopback-component-explorer')) {
-      var explorerPath = app.get('loopback-component-explorer').mountPath;
-      console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
-    }
-  });
+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');
+
+  const baseUrl = app.get('url').replace(/\/$/, '');
+  console.log('Web server listening at: %s', baseUrl);
+
+  if (app.get('loopback-component-explorer')) {
+    const explorerPath = app.get('loopback-component-explorer').mountPath;
+    console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
+  }
+});
+
 // Bootstrap the application, configure models, datasources and middleware.
 // Sub-apps like REST API are mounted via boot scripts.
-boot(app, __dirname, function(err) {
+boot(app, bootOptions, (err) => {
   if (err) throw err;
 
   // start the server if `$ node server.js`
-  if (require.main === module)
-    app.start();
+  if (require.main === module) app.start();
 });