build: speed up webpack build using HardSource for caching

.gitignore

@@ -29,3 +29,5 @@ npm-debug.log.*
 # Cypress testing. These will get downloaded as artifacts by buildkite.
 cypress/screenshots/
 cypress/vidoes/
+
+.cache/

app/app.scss

@@ -89,5 +89,5 @@ $theme-colors-light: (
 @import './components/symbols';
 @import './components/codeIntelStatusIndicator';
 @import 'node_modules/@sourcegraph/codeintellify/lib/HoverOverlay.scss';
-@import 'node_modules/@sourcegraph/react-loading-spinner/lib/LoadingSpinner.css';
+@import 'node_modules/@sourcegraph/react-loading-spinner/lib/LoadingSpinner';
 @import './extensions-client-common';

app/extensions-client-common.scss

@@ -1,8 +1,8 @@
-@import 'node_modules/@sourcegraph/extensions-client-common/lib/ui/generic/PopoverButton.css';
-@import 'node_modules/@sourcegraph/extensions-client-common/lib/ui/generic/Toggle.css';
+@import 'node_modules/@sourcegraph/extensions-client-common/lib/ui/generic/PopoverButton';
+@import 'node_modules/@sourcegraph/extensions-client-common/lib/ui/generic/Toggle';
 @import 'node_modules/@sourcegraph/extensions-client-common/lib/app/CommandList';
 @import 'node_modules/@sourcegraph/extensions-client-common/lib/app/ExtensionStatus';
-@import 'node_modules/@sourcegraph/extensions-client-common/lib/extensions/manager/ExtensionCard.css';
+@import 'node_modules/@sourcegraph/extensions-client-common/lib/extensions/manager/ExtensionCard';
 
 $body-color-light: #2b3750;
 $body-color-dark: #f2f4f8;

package.json

@@ -63,6 +63,7 @@
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "get-graphql-schema": "^2.1.1",
     "gql2ts": "^1.2.1",
+    "hard-source-webpack-plugin": "^0.12.0",
     "husky": "^0.14.3",
     "jade": "^1.11.0",
     "node-sass": "^4.9.0",

webpack/base.config.ts

@@ -1,5 +1,5 @@
 import ExtractTextPlugin from 'extract-text-webpack-plugin'
-import sassImportOnce from 'node-sass-import-once'
+import HardSourceWebpackPlugin from 'hard-source-webpack-plugin'
 import * as path from 'path'
 import * as webpack from 'webpack'
 
@@ -32,6 +32,23 @@ export default {
             filename: '../css/[name].bundle.css',
             allChunks: true,
         }),
+        new HardSourceWebpackPlugin({
+            cachePrune: {
+                // Ignore the age of cache entries. Without this, the size of
+                // the cache can balloon past the `sizeThreshold`.
+                maxAge: 0,
+                // The cache size needs to be large enough for the build
+                // artifacts, otherwise the cache will get deleted and rendered
+                // useless. The build artifacts total ~70MB at the time of
+                // writing, so 500MB of cache is plenty.
+                sizeThreshold: 500 * 1024 * 1024,
+            },
+        }),
+        new HardSourceWebpackPlugin.ExcludeModulePlugin([
+            {
+                test: /sass-loader/,
+            },
+        ]),
     ],
     resolve: {
         extensions: ['.ts', '.tsx', '.js'],
@@ -68,10 +85,6 @@ export default {
                         loader: 'sass-loader',
                         options: {
                             includePaths: [__dirname + '/node_modules'],
-                            importer: sassImportOnce,
-                            importOnce: {
-                                css: true,
-                            },
                         },
                     },
                 ]),