Make hard source plugin switchable

Author: ajones513

packages/react-scripts/config/webpack.config.js

@@ -57,6 +57,9 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+// We might not want to use the hard source plugin on environments that won't persist the cache for later
+const useHardSourceWebpackPlugin =
+  process.env.USE_HARD_SOURCE_WEBPACK_PLUGIN === 'true';
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -283,11 +286,13 @@ module.exports = function(webpackEnv) {
         ? {
             chunks: 'all',
             name: false,
-            cacheGroups: bpkReactScriptsConfig.vendorsChunkRegex ? {
-              vendors: {
-                test: new RegExp(bpkReactScriptsConfig.vendorsChunkRegex),
-              },
-            } : {},
+            cacheGroups: bpkReactScriptsConfig.vendorsChunkRegex
+              ? {
+                  vendors: {
+                    test: new RegExp(bpkReactScriptsConfig.vendorsChunkRegex),
+                  },
+                }
+              : {},
           }
         : {},
       // Keep the runtime chunk seperated to enable long term caching
@@ -605,17 +610,18 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
-      new HardSourceWebpackPlugin(),
-      new HardSourceWebpackPlugin.ExcludeModulePlugin([
-        {
+      useHardSourceWebpackPlugin && new HardSourceWebpackPlugin(),
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin.ExcludeModulePlugin([
+          {
             // HardSource works with mini-css-extract-plugin but due to how
             // mini-css emits assets, assets are not emitted on repeated builds with
             // mini-css and hard-source together. Ignoring the mini-css loader
             // modules, but not the other css loader modules, excludes the modules
             // that mini-css needs rebuilt to output assets every time.
             test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
-        },
-      ]),
+          },
+        ]),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(

packages/react-scripts/config/webpack.config.ssr.js

@@ -56,6 +56,9 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 // const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+// We might not want to use the hard source plugin on environments that won't persist the cache for later
+const useHardSourceWebpackPlugin =
+  process.env.USE_HARD_SOURCE_WEBPACK_PLUGIN === 'true';
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -613,17 +616,18 @@ module.exports = function(webpackEnv) {
     },
     plugins: [
       new webpack.IgnorePlugin(/\/iconv-loader$/), // https://github.com/webpack/webpack/issues/3078#issuecomment-400697407
-      new HardSourceWebpackPlugin(),
-      new HardSourceWebpackPlugin.ExcludeModulePlugin([
-        {
+      useHardSourceWebpackPlugin && new HardSourceWebpackPlugin(),
+      useHardSourceWebpackPlugin &&
+        new HardSourceWebpackPlugin.ExcludeModulePlugin([
+          {
             // HardSource works with mini-css-extract-plugin but due to how
             // mini-css emits assets, assets are not emitted on repeated builds with
             // mini-css and hard-source together. Ignoring the mini-css loader
             // modules, but not the other css loader modules, excludes the modules
             // that mini-css needs rebuilt to output assets every time.
             test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
-        },
-      ]),
+          },
+        ]),
       new LoadablePlugin(),
       // Generates an `index.html` file with the <script> injected.
       // new HtmlWebpackPlugin(