Give devs more options for dynamically setting publicPath

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')));

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
+/** Dynamically set absolute public path from current protocol and host */
-if (WEBPACK_PUBLIC_PATH) {
+if (SAGE_DIST_PATH) {
-  // eslint-disable-next-line no-undef, camelcase
+  __webpack_public_path__ = SAGE_DIST_PATH; // eslint-disable-line no-undef, camelcase
-  __webpack_public_path__ = `${location.protocol}//${location.host}${WEBPACK_PUBLIC_PATH}`;
 }

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,

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,
     }),