webpack: Use cache-loader for various loaders.

Profiling shows that using cache-loader saves ~6-7 seconds of time take
by webpack-dev-server on subsequent runs. The overhaul this adds when
nothing is cached (when running first time) is around 1-2 seconds. We don't
use cache loader for ts-loader since webpack docs says it will slow it down
and file-loader since it just copies files over and caching it would just
was disk space.

Profiling data:

-------- Master ---------

~/zulip (master) $ tools/webpack --watch | ts -s '%.S' # master
03.995825 ℹ ｢wds｣: Project is running at http://127.0.0.1:9994/
03.996161 ℹ ｢wds｣: webpack output is served from /webpack/
03.996289 ℹ ｢wds｣: Content not from webpack is served from ...
19.284477 ℹ ｢wdm｣:
19.285371 ℹ ｢wdm｣: Compiled successfully.

-------- cache-loader ---------

~/zulip (cache-loader)$ tools/webpack --watch | ts -s '%.S'
04.107913 ℹ ｢wds｣: Project is running at http://127.0.0.1:9994/
04.108646 ℹ ｢wds｣: webpack output is served from /webpack/
04.109068 ℹ ｢wds｣: Content not from webpack is served from ...
12.633782 ℹ ｢wdm｣:
12.634083 ℹ ｢wdm｣: Compiled successfully.

tools/webpack-helpers.ts

@@ -1,6 +1,13 @@
-import { basename } from 'path';
+import { basename, resolve } from 'path';
 import { RuleSetRule } from 'webpack';
 
+export const cacheLoader: RuleSetRule = {
+    loader: 'cache-loader',
+    options: {
+        cacheDirectory: resolve(__dirname, '../var/webpack-cache'),
+    },
+};
+
 /* Return imports-loader format to the config
     For example:
     [
@@ -17,7 +24,7 @@ function getImportLoaders(optionsArr: ImportLoaderOptions[]): RuleSetRule[] {
     for (var loaderEntry of optionsArr) {
         importsLoaders.push({
             test: require.resolve(loaderEntry.path),
-            use: "imports-loader?" + loaderEntry.args,
+            use: [cacheLoader, "imports-loader?" + loaderEntry.args],
         });
     }
     return importsLoaders;
@@ -44,7 +51,7 @@ function getExposeLoaders(optionsArr: ExportLoaderOptions[]): RuleSetRule[] {
     for (var loaderEntry of optionsArr) {
         const path = loaderEntry.path;
         let name = "";
-        const useArr = [];
+        const useArr = [cacheLoader];
         // If no name is provided, infer it
         if (!loaderEntry.name) {
             name = basename(path, '.js');

tools/webpack.config.ts

@@ -4,7 +4,7 @@ import * as webpack from 'webpack';
 // The devServer member of webpack.Configuration is managed by the
 // webpack-dev-server package. We are only importing the type here.
 import * as _webpackDevServer from 'webpack-dev-server';
-import { getExposeLoaders, getImportLoaders } from './webpack-helpers';
+import { getExposeLoaders, getImportLoaders, cacheLoader } from './webpack-helpers';
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 const assets = require('./webpack.assets.json');
@@ -42,12 +42,13 @@ export default (env?: string): webpack.Configuration => {
                 {
                     // We dont want to match admin.js
                     test: /(\.min|min\.|zxcvbn)\.js/,
-                    use: ['script-loader'],
+                    use: [cacheLoader, 'script-loader'],
                 },
                 // regular css files
                 {
                     test: /\.css$/,
                     use: getHotCSS([
+                        cacheLoader,
                         MiniCssExtractPlugin.loader,
                         {
                             loader: 'css-loader',
@@ -61,6 +62,7 @@ export default (env?: string): webpack.Configuration => {
                 {
                     test: /\.(sass|scss)$/,
                     use: getHotCSS([
+                        cacheLoader,
                         MiniCssExtractPlugin.loader,
                         {
                             loader: 'css-loader',