review: suggested improvements

src/core/build/createWebpackConfig.ts

@@ -9,7 +9,7 @@ import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 import UglifyJsPlugin from "uglifyjs-webpack-plugin";
 import webpack, { Configuration } from "webpack";
 import ManifestPlugin from "webpack-manifest-plugin";
-import CDNWebpackPlugin from "./plugins/CDNWebpackPlugin";
+import PublicURIWebpackPlugin from "./plugins/PublicURIWebpackPlugin";
 
 import paths from "./paths";
 
@@ -40,6 +40,13 @@ export default function createWebpackConfig({
 
   const isProduction = env.NODE_ENV === "production";
 
+  /**
+   * ifProduction will only include the nodes if we're in production mode.
+   */
+  const ifProduction = isProduction
+    ? <T extends {}>(...nodes: T[]) => nodes
+    : <T extends {}>(...nodes: T[]) => [];
+
   const htmlWebpackConfig: Options = {
     minify: isProduction && {
       removeComments: true,
@@ -439,14 +446,14 @@ export default function createWebpackConfig({
         stream: [
           // We ship polyfills by default
           paths.appPolyfill,
-          paths.appPublicPath,
+          ...ifProduction(paths.appPublicPath),
           ...devServerEntries,
           paths.appStreamIndex,
         ],
         auth: [
           // We ship polyfills by default
           paths.appPolyfill,
-          paths.appPublicPath,
+          ...ifProduction(paths.appPublicPath),
           ...devServerEntries,
           paths.appAuthIndex,
           // Remove deactivated entries.
@@ -454,14 +461,14 @@ export default function createWebpackConfig({
         install: [
           // We ship polyfills by default
           paths.appPolyfill,
-          paths.appPublicPath,
+          ...ifProduction(paths.appPublicPath),
           ...devServerEntries,
           paths.appInstallIndex,
         ],
         admin: [
           // We ship polyfills by default
           paths.appPolyfill,
-          paths.appPublicPath,
+          ...ifProduction(paths.appPublicPath),
           ...devServerEntries,
           paths.appAdminIndex,
         ],
@@ -500,9 +507,15 @@ export default function createWebpackConfig({
           inject: "body",
           ...htmlWebpackConfig,
         }),
-        // Inject the pieces we need here to resolve all the now relative url's
-        // against the CDN if it's provided.
-        new CDNWebpackPlugin({ production: isProduction }),
+        ...ifProduction(
+          // Inject the pieces we need here to resolve all the now relative url's
+          // against the CDN if it's provided. It will inject the following into
+          // the configuration blob on the page.
+          new PublicURIWebpackPlugin(
+            "{{ staticURI | dump | safe }}",
+            "{{ staticURI }}"
+          )
+        ),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

src/core/build/plugins/PublicURIWebpackPlugin.ts

@@ -1,15 +1,13 @@
 import { Hooks } from "html-webpack-plugin";
 import { Compiler, Plugin } from "webpack";
 
-export interface CDNWebpackPluginOptions {
-  production: boolean;
-}
+export default class PublicURIWebpackPlugin implements Plugin {
+  private configTemplate: string;
+  private prefixTemplate: string;
 
-export default class CDNWebpackPlugin implements Plugin {
-  private production: boolean;
-
-  constructor({ production }: CDNWebpackPluginOptions) {
-    this.production = production;
+  constructor(configTemplate: string, prefixTemplate: string) {
+    this.configTemplate = configTemplate;
+    this.prefixTemplate = prefixTemplate;
   }
 
   private prefixAttribute(attr: string | boolean) {
@@ -17,7 +15,7 @@ export default class CDNWebpackPlugin implements Plugin {
       return attr;
     }
 
-    return "{{ staticURI }}" + attr;
+    return this.prefixTemplate + attr;
   }
 
   private prefixTag = (tag: {
@@ -35,10 +33,6 @@ export default class CDNWebpackPlugin implements Plugin {
   };
 
   public apply = (compiler: Compiler) => {
-    if (!this.production) {
-      return;
-    }
-
     compiler.hooks.compilation.tap("CDNWebpackPlugin", compilation => {
       (compilation.hooks as Hooks).htmlWebpackPluginAlterAssetTags.tapAsync(
         "CDNWebpackPlugin",
@@ -54,7 +48,7 @@ export default class CDNWebpackPlugin implements Plugin {
               type: "application/json",
               id: "config",
             },
-            innerHTML: "{{ staticURI | dump | safe }}",
+            innerHTML: this.configTemplate,
             voidTag: false,
           });