From bdaf038248a95f431b0e27fc2c2065c41a143b58 Mon Sep 17 00:00:00 2001
From: QWp6t <hi@qwp6t.me>
Date: Mon, 9 Jan 2017 16:22:23 -0800
Subject: [PATCH] Give devs more options for dynamically setting `publicPath`

---
 assets/build/config.js               | 22 +++++++++++++++++-----
 assets/build/public-path.js          |  9 ++++-----
 assets/build/webpack.config.js       | 12 +++++-------
 assets/build/webpack.config.watch.js |  7 +++++--
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/assets/build/config.js b/assets/build/config.js
index 5fc6e87..b77763d 100644
--- a/assets/build/config.js
+++ b/assets/build/config.js
@@ -31,15 +31,27 @@ const config = mergeWithConcat({
 config.watch.push(`${path.basename(config.paths.assets)}/${config.copy}`);
 config.watch = uniq(config.watch);
 
-Object.keys(config.entry).forEach(id =>
-  config.entry[id].unshift(path.join(__dirname, 'public-path.js')));
-
 module.exports = mergeWithConcat(config, {
   env: Object.assign({ production: isProduction, development: !isProduction }, argv.env),
   publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
   manifest: {},
 });
 
-if (config.enabled.watcher && !process.env.WEBPACK_PUBLIC_PATH) {
-  process.env.WEBPACK_PUBLIC_PATH = config.publicPath;
+/**
+ * If your publicPath differs between environments, but you know it at compile time,
+ * then set SAGE_DIST_PATH as an environment variable before compiling.
+ * Example:
+ *   SAGE_DIST_PATH=/wp-content/themes/sage/dist yarn build:production
+ */
+if (process.env.SAGE_DIST_PATH) {
+  module.exports.publicPath = process.env.SAGE_DIST_PATH;
 }
+
+/**
+ * If you don't know your publicPath at compile time, then uncomment the lines
+ * below and use WordPress's wp_localize_script() to set SAGE_DIST_PATH global.
+ * Example:
+ *   wp_localize_script('sage/main.js', 'SAGE_DIST_PATH', get_theme_file_uri('dist/'))
+ */
+// Object.keys(module.exports.entry).forEach(id =>
+//   module.exports.entry[id].unshift(path.join(__dirname, 'public-path.js')));
diff --git a/assets/build/public-path.js b/assets/build/public-path.js
index f92bee6..1f78bf4 100644
--- a/assets/build/public-path.js
+++ b/assets/build/public-path.js
@@ -1,8 +1,7 @@
 /* eslint-env browser */
-/* globals WEBPACK_PUBLIC_PATH */
+/* globals SAGE_DIST_PATH */
 
-// Dynamically set absolute public path from current protocol and host
-if (WEBPACK_PUBLIC_PATH) {
-  // eslint-disable-next-line no-undef, camelcase
-  __webpack_public_path__ = `${location.protocol}//${location.host}${WEBPACK_PUBLIC_PATH}`;
+/** Dynamically set absolute public path from current protocol and host */
+if (SAGE_DIST_PATH) {
+  __webpack_public_path__ = SAGE_DIST_PATH; // eslint-disable-line no-undef, camelcase
 }
diff --git a/assets/build/webpack.config.js b/assets/build/webpack.config.js
index 91ead54..5ba816a 100644
--- a/assets/build/webpack.config.js
+++ b/assets/build/webpack.config.js
@@ -122,9 +122,12 @@ let webpackConfig = {
       root: config.paths.root,
       verbose: false,
     }),
+    /**
+     * It would be nice to switch to copy-webpack-plugin, but
+     * unfortunately it doesn't provide a reliable way of
+     * tracking the before/after file names
+     */
     new CopyGlobsPlugin({
-      // It would be nice to switch to copy-webpack-plugin, but unfortunately it doesn't
-      // provide a reliable way of tracking the before/after file names
       pattern: config.copy,
       output: `[path]${assetsFilenames}.[ext]`,
       manifest: config.manifest,
@@ -141,11 +144,6 @@ let webpackConfig = {
       Tether: 'tether',
       'window.Tether': 'tether',
     }),
-    new webpack.DefinePlugin({
-      WEBPACK_PUBLIC_PATH: (process.env.WEBPACK_PUBLIC_PATH)
-        ? JSON.stringify(process.env.WEBPACK_PUBLIC_PATH)
-        : false,
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: config.enabled.optimize,
       debug: config.enabled.watcher,
diff --git a/assets/build/webpack.config.watch.js b/assets/build/webpack.config.watch.js
index 3d68d94..9116fb4 100644
--- a/assets/build/webpack.config.watch.js
+++ b/assets/build/webpack.config.watch.js
@@ -4,7 +4,10 @@ const BrowserSyncPlugin = require('browsersync-webpack-plugin');
 const config = require('./config');
 
 module.exports = {
-  output: { pathinfo: true },
+  output: {
+    pathinfo: true,
+    publicPath: config.proxyUrl + config.publicPath,
+  },
   devtool: '#cheap-module-source-map',
   stats: false,
   plugins: [
@@ -13,7 +16,7 @@ module.exports = {
     new webpack.NoErrorsPlugin(),
     new BrowserSyncPlugin({
       target: config.devUrl,
-      publicPath: config.publicPath,
+      publicPath: '../',
       proxyUrl: config.proxyUrl,
       watch: config.watch,
     }),