Fix browsersync (#1815)

* Update dependencies
* Remove monkey-hot-loader
* Use webpack-merge instead of util/mergeWithConcat()
* Fix: copyglobs plugin `after-emit` is bound twice
* NoErrorsPlugin() is deprecated in favor of NoEmitOnErrorsPlugin()
* webpack-dev-middleware should use same publicPath as compiler
* webpack-hot-middleware/client should be prepended to entries
* Browser should refresh when HMR fails
* Bootstrap package.json has correct main property
Sometime between alpha 2 and 3, package.json was pointing to nonexistent
file, so we referenced file manually in our repo. Underlying issue was
fixed by alpha 4, so we no longer have to specify full path to file.

assets/build/config.js

@@ -1,8 +1,8 @@
 const path = require('path');
 const argv = require('minimist')(process.argv.slice(2));
 const uniq = require('lodash/uniq');
+const merge = require('webpack-merge');
 
-const mergeWithConcat = require('./util/mergeWithConcat');
 const userConfig = require('../config');
 
 const isProduction = !!((argv.env && argv.env.production) || argv.p);
@@ -10,7 +10,7 @@ const rootPath = (userConfig.paths && userConfig.paths.root)
   ? userConfig.paths.root
   : process.cwd();
 
-const config = mergeWithConcat({
+const config = merge({
   copy: 'images/**/*',
   proxyUrl: 'http://localhost:3000',
   cacheBusting: '[name]_[hash]',
@@ -32,7 +32,7 @@ const config = mergeWithConcat({
 config.watch.push(`${path.basename(config.paths.assets)}/${config.copy}`);
 config.watch = uniq(config.watch);
 
-module.exports = mergeWithConcat(config, {
+module.exports = merge(config, {
   env: Object.assign({ production: isProduction, development: !isProduction }, argv.env),
   publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
   manifest: {},

assets/build/util/addHotMiddleware.js

@@ -10,12 +10,12 @@ module.exports = (entry) => {
   const results = {};
   const hotMiddlewareScript = `webpack-hot-middleware/client?${qs.stringify({
     timeout: 20000,
-    reload: false,
+    reload: true,
   })}`;
 
   Object.keys(entry).forEach((name) => {
     results[name] = Array.isArray(entry[name]) ? entry[name].slice(0) : [entry[name]];
-    results[name].push(hotMiddlewareScript);
+    results[name].unshift(hotMiddlewareScript);
   });
   return results;
 };

assets/build/util/mergeWithConcat.js

@@ -1,12 +0,0 @@
-const mergeWith = require('lodash/mergeWith');
-
-module.exports = function mergeWithConcat() {
-  const args = [].slice.call(arguments);
-  args.push((a, b) => {
-    if (Array.isArray(a) && Array.isArray(b)) {
-      return a.concat(b);
-    }
-    return undefined;
-  });
-  return mergeWith.apply(this, args);
-};

assets/build/webpack.config.js

@@ -2,30 +2,17 @@
 
 const webpack = require('webpack');
 const qs = require('qs');
+const merge = require('webpack-merge');
 const autoprefixer = require('autoprefixer');
 const CleanPlugin = require('clean-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const CopyGlobsPlugin = require('./webpack.plugin.copyglobs');
-const mergeWithConcat = require('./util/mergeWithConcat');
 const config = require('./config');
 
 const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
 const sourceMapQueryStr = (config.enabled.sourceMaps) ? '+sourceMap' : '-sourceMap';
 
-const jsLoader = {
-  test: /\.js$/,
-  exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
-  use: [{
-    loader: 'buble',
-    options: { objectAssign: 'Object.assign' },
-  }],
-};
-
-if (config.enabled.watcher) {
-  jsLoader.use.unshift('monkey-hot?sourceType=module');
-}
-
 let webpackConfig = {
   context: config.paths.assets,
   entry: config.entry,
@@ -37,13 +24,18 @@ let webpackConfig = {
   },
   module: {
     rules: [
-      jsLoader,
       {
         enforce: 'pre',
         test: /\.js?$/,
         include: config.paths.assets,
         loader: 'eslint',
       },
+      {
+        test: /\.js$/,
+        exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
+        loader: 'buble',
+        options: { objectAssign: 'Object.assign' },
+      },
       {
         test: /\.css$/,
         include: config.paths.assets,
@@ -171,11 +163,11 @@ let webpackConfig = {
 /* eslint-disable global-require */ /** Let's only load dependencies as needed */
 
 if (config.enabled.optimize) {
-  webpackConfig = mergeWithConcat(webpackConfig, require('./webpack.config.optimize'));
+  webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
 }
 
 if (config.env.production) {
-  webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
+  webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
 }
 
 if (config.enabled.cacheBusting) {
@@ -194,7 +186,7 @@ if (config.enabled.cacheBusting) {
 
 if (config.enabled.watcher) {
   webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
-  webpackConfig = mergeWithConcat(webpackConfig, require('./webpack.config.watch'));
+  webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
 }
 
 module.exports = webpackConfig;

assets/build/webpack.config.watch.js

@@ -13,10 +13,9 @@ module.exports = {
   plugins: [
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new BrowserSyncPlugin({
       target: config.devUrl,
-      publicPath: config.publicPath,
       proxyUrl: config.proxyUrl,
       watch: config.watch,
     }),

assets/build/webpack.plugin.copyglobs.js

@@ -82,7 +82,6 @@ module.exports = class {
     if (!this.started) {
       compiler.plugin('emit', this.emitHandler.bind(this));
       compiler.plugin('after-emit', this.afterEmitHandler.bind(this));
-      compiler.plugin('after-emit', this.afterEmitHandler.bind(this));
       this.started = true;
     }
   }

assets/scripts/main.js

@@ -1,6 +1,6 @@
 /** import external dependencies */
 import 'jquery';
-import 'bootstrap/dist/js/bootstrap';
+import 'bootstrap';
 
 /** import local dependencies */
 import Router from './util/Router';

package.json

@@ -31,9 +31,9 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.6.1",
-    "body-parser": "^1.15.2",
+    "body-parser": "^1.16.0",
     "browser-sync": "^2.18.6",
-    "browsersync-webpack-plugin": "^0.2.0",
+    "browsersync-webpack-plugin": "^0.3.3",
     "buble": "^0.15.2",
     "buble-loader": "^0.4.0",
     "clean-webpack-plugin": "^0.1.15",
@@ -41,7 +41,7 @@
     "cssnano": "^3.10.0",
     "eslint": "^3.13.1",
     "eslint-loader": "^1.6.1",
-    "eslint-plugin-import": "^2.0.1",
+    "eslint-plugin-import": "^2.2.0",
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.9.0",
     "glob": "^7.1.1",
@@ -51,21 +51,21 @@
     "loader-utils": "^0.2.16",
     "lodash": "^4.17.4",
     "minimist": "^1.2.0",
-    "monkey-hot-loader": "github:rmarscher/monkey-hot-loader#webpack2-import",
+    "node-sass": "^4.3.0",
-    "node-sass": "^4.2.0",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
-    "postcss": "^5.2.9",
+    "postcss": "^5.2.10",
-    "postcss-loader": "^1.2.1",
+    "postcss-loader": "^1.2.2",
     "qs": "^6.3.0",
     "resolve-url-loader": "^1.6.1",
     "rimraf": "^2.5.4",
     "sass-loader": "^4.1.1",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^2.2.0-rc.3",
+    "webpack": "^2.2.0",
     "webpack-assets-manifest": "^0.6.1",
     "webpack-dev-middleware": "^1.9.0",
-    "webpack-hot-middleware": "^2.15.0"
+    "webpack-hot-middleware": "^2.15.0",
+    "webpack-merge": "^2.4.0"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.6",