Fix webpack HMR

assets/build/config.js

@@ -47,4 +47,5 @@ module.exports = mergeWithConcat(config, {
         .map(file => path.join(config.paths.assets, file));
     },
   },
+  publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
 });

assets/build/util/addHotMiddleware.js

@@ -0,0 +1,21 @@
+const qs = require('qs');
+
+/**
+ * Loop through webpack entry
+ * and add the hot middleware
+ * @param  {Object} entry webpack entry
+ * @return {Object} entry with hot middleware
+ */
+module.exports = (entry) => {
+  const results = {};
+  const hotMiddlewareScript = `webpack-hot-middleware/client?${qs.stringify({
+    timeout: 20000,
+    reload: false,
+  })}`;
+
+  Object.keys(entry).forEach(name => {
+    results[name] = Array.isArray(entry[name]) ? entry[name].slice(0) : [entry[name]];
+    results[name].push(hotMiddlewareScript);
+  });
+  return results;
+};

assets/build/util/assetsPluginProcessOutput.js

@@ -0,0 +1,18 @@
+const path = require('path');
+
+/**
+ * Process AssetsPlugin output and format it
+ * for Sage: {"[name].[ext]":"[name]_[hash].[ext]"}
+ * @param  {Object} assets passed by processOutput
+ * @return {String}        JSON
+ */
+module.exports = (assets) => {
+  const results = {};
+  Object.keys(assets).forEach(name => {
+    Object.keys(assets[name]).forEach(ext => {
+      const filename = `${path.dirname(assets[name][ext])}/${path.basename(`${name}.${ext}`)}`;
+      results[filename] = assets[name][ext];
+    });
+  });
+  return JSON.stringify(results);
+};

assets/build/webpack.config.js

@@ -8,22 +8,28 @@ const ImageminPlugin = require('imagemin-webpack-plugin').default;
 const imageminMozjpeg = require('imagemin-mozjpeg');
 
 const mergeWithConcat = require('./util/mergeWithConcat');
+const addHotMiddleware = require('./util/addHotMiddleware');
 const webpackConfigProduction = require('./webpack.config.production');
 const webpackConfigWatch = require('./webpack.config.watch');
 const config = require('./config');
 
-const publicPath = `${config.publicPath}/${path.basename(config.paths.dist)}/`;
 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))/],
-  loaders: [`babel?presets[]=${path.resolve('./node_modules/babel-preset-es2015')}&cacheDirectory`],
+  loaders: [{
+    loader: 'babel',
+    query: {
+      presets: [[path.resolve('./node_modules/babel-preset-es2015'), { modules: false }]],
+      cacheDirectory: true,
+    },
+  }],
 };
 
 if (config.enabled.watcher) {
-  jsLoader.loaders.unshift('monkey-hot');
+  jsLoader.loaders.unshift('monkey-hot?sourceType=module');
 }
 
 const webpackConfig = {
@@ -32,7 +38,7 @@ const webpackConfig = {
   devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
   output: {
     path: config.paths.dist,
-    publicPath,
+    publicPath: config.publicPath,
     filename: `scripts/${assetsFilenames}.js`,
   },
   module: {
@@ -148,11 +154,6 @@ const webpackConfig = {
       Tether: 'tether',
       'window.Tether': 'tether',
     }),
-    new webpack.DefinePlugin({
-      WEBPACK_PUBLIC_PATH: (config.enabled.watcher)
-        ? JSON.stringify(publicPath)
-        : false,
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: config.enabled.minify,
       debug: config.enabled.watcher,
@@ -181,19 +182,15 @@ if (config.env.production) {
 }
 
 if (config.enabled.watcher) {
-  module.exports = mergeWithConcat(webpackConfig, webpackConfigWatch);
+  module.exports = mergeWithConcat(webpackConfig, webpackConfigWatch, {
+    entry: addHotMiddleware(webpackConfig.entry),
+  });
 }
 
 if (config.enabled.uglifyJs) {
   module.exports.plugins.push(
     new webpack.optimize.UglifyJsPlugin({
-      compress: config.enabled.minify ? {
-        drop_debugger: true,
-        dead_code: true,
-        warnings: false,
-      } : false,
       sourceMap: config.enabled.sourceMaps,
-      output: { comments: false },
     })
   );
 }

assets/build/webpack.config.production.js

@@ -1,34 +1,17 @@
 const AssetsPlugin = require('assets-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const cssnano = require('cssnano');
-const path = require('path');
 
+const processOutput = require('./util/assetsPluginProcessOutput');
 const config = require('./config');
 
-/**
- * Process AssetsPlugin output and format it
- * for Sage: {"[name].[ext]":"[name]_[hash].[ext]"}
- * @param  {Object} assets passed by processOutput
- * @return {String}        JSON
- */
-const assetsPluginProcessOutput = (assets) => {
-  const results = {};
-  Object.keys(assets).forEach(name => {
-    Object.keys(assets[name]).forEach(ext => {
-      const filename = `${path.dirname(assets[name][ext])}/${path.basename(`${name}.${ext}`)}`;
-      results[filename] = assets[name][ext];
-    });
-  });
-  return JSON.stringify(results);
-};
-
 module.exports = {
   plugins: [
     new AssetsPlugin({
       path: config.paths.dist,
       filename: 'assets.json',
       fullPath: false,
-      processOutput: assetsPluginProcessOutput,
+      processOutput,
     }),
     new OptimizeCssAssetsPlugin({
       cssProcessor: cssnano,

assets/build/webpack.config.watch.js

@@ -1,21 +1,24 @@
-const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
-const url = require('url');
+const webpack = require('webpack');
+const BrowserSyncPlugin = require('./webpack.plugin.browsersync');
 
 const config = require('./config');
 
 module.exports = {
   output: { pathinfo: true },
   debug: true,
-  devTool: 'cheap-module-source-map',
+  devtool: '#cheap-module-source-map',
   plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new webpack.DefinePlugin({
+      WEBPACK_PUBLIC_PATH: JSON.stringify(config.publicPath),
+    }),
     new BrowserSyncPlugin({
-      host: url.parse(config.proxyUrl).hostname,
-      port: url.parse(config.proxyUrl).port,
-      proxy: config.devUrl,
-      files: [
-        'templates/**/*.php',
-        'src/**/*.php',
-      ],
+      target: config.devUrl,
+      publicPath: config.publicPath,
+      proxyUrl: config.proxyUrl,
+      browserSyncOptions: { files: config.watch },
     }),
   ],
 };

assets/build/webpack.plugin.browsersync.js

@@ -0,0 +1,55 @@
+'use strict'; // eslint-disable-line strict
+
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const browserSync = require('browser-sync');
+const url = require('url');
+
+const mergeWithConcat = require('./util/mergeWithConcat');
+
+module.exports = class {
+  constructor(options) {
+    this.watcher = null;
+    this.compiler = null;
+    this.options = mergeWithConcat({
+      proxyUrl: 'https://localhost:3000',
+      callback() {},
+    }, options);
+  }
+  apply(compiler) {
+    if (this.options.disable) {
+      return;
+    }
+    this.compiler = compiler;
+    compiler.plugin('done', this.doneCompiling);
+  }
+  doneCompiling() {
+    if (!this.watcher) {
+      this.watcher = browserSync.create();
+      this.compiler.plugin('compilation', () => this.watcher.notify('Rebuilding...'));
+      this.start();
+    }
+    // Optionally add logic for this.watcher.reload()
+  }
+  start() {
+    const watcherConfig = mergeWithConcat({
+      host: url.parse(this.options.proxyUrl).hostname,
+      port: url.parse(this.options.proxyUrl).port,
+      proxy: {
+        target: this.options.target,
+        middleware: this.middleware(),
+      },
+    }, this.options.browserSyncOptions);
+    this.watcher.init(watcherConfig, this.options.callback.bind(this));
+  }
+  middleware() {
+    this.webpackDevMiddleware = webpackDevMiddleware(this.compiler, {
+      publicPath: this.options.publicPath,
+      stats: { colors: true },
+    });
+    this.webpackHotMiddleware = webpackHotMiddleware(this.compiler, {
+      log: this.watcher.notify.bind(this.watcher),
+    });
+    return [this.webpackDevMiddleware, this.webpackHotMiddleware];
+  }
+};

assets/config.json

@@ -8,6 +8,10 @@
       "./scripts/customizer.js"
     ]
   },
+  "watch": [
+    "templates/**/*.php",
+    "src/**/*.php"
+  ],
   "publicPath": "/app/themes/sage",
   "devUrl": "https://example.dev",
   "proxyUrl": "https://localhost:3000",