Speed webpack compilation (oppia#6751)

* speed up webpack compilation

* compile webpack before running server

* add explaining comment

* add quicker compile to tests + formatting

* add typechecking

* dont specify files in tests

* add explaining comment

* use prod mode in backend test

* set DEV_MODE to true

* remove trailing space

core/tests/karma.conf.ts

@@ -1,4 +1,6 @@
 var argv = require('yargs').argv;
+var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+var path = require('path');
 var generatedJs = 'third_party/generated/js/third_party.js';
 if (argv.prodEnv) {
   generatedJs = (
@@ -151,9 +153,22 @@ module.exports = function(config) {
       module: {
         rules: [{
           test: /\.ts$/,
-          use: 'ts-loader',
+          use: [
+            'cache-loader',
+            'thread-loader',
+            {
+              loader: 'ts-loader',
+              options: {
+                // this is needed for thread-loader to work correctly
+                happyPackMode: true
+              }
+            }
+          ]
         }]
-      }
+      },
+      plugins: [
+        new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true })
+      ]
     }
   });
 };

package.json

@@ -40,12 +40,14 @@
     "ajv": "^6.10.0",
     "babel-eslint": "^10.0.1",
     "browserstack-local": "^1.3.7",
+    "cache-loader": "^3.0.1",
     "clean-webpack-plugin": "^2.0.1",
     "dotenv": "^7.0.0",
     "enhanced-resolve": "^4.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-angular": "^4.0.0",
     "eslint-plugin-html": "^5.0.3",
+    "fork-ts-checker-webpack-plugin": "^1.3.3",
     "gulp": "^4.0.1",
     "gulp-concat": "^2.6.1",
     "htmllint": "^0.8.0",
@@ -65,6 +67,7 @@
     "protractor-screenshot-reporter": "0.0.5",
     "stylelint": "^10.0.1",
     "stylelint-config-standard": "^18.3.0",
+    "thread-loader": "^2.1.2",
     "ts-loader": "^5.4.4",
     "typescript": "^3.4.5",
     "uglify-js": "^3.5.8",

scripts/run_backend_tests.sh

@@ -90,7 +90,7 @@ echo "Compiling typescript..."
 $NODE_MODULE_DIR/typescript/bin/tsc --project .
 
 echo "Compiling webpack..."
-$NODE_MODULE_DIR/webpack/bin/webpack.js --config webpack.dev.config.ts
+$NODE_MODULE_DIR/webpack/bin/webpack.js --config webpack.prod.config.ts
 $PYTHON_CMD scripts/build.py
 
 $PYTHON_CMD scripts/backend_tests.py $@

scripts/start.sh

@@ -100,15 +100,18 @@ rm assets/constants.js.bak
 
 # Set up a local dev instance.
 # TODO(sll): do this in a new shell.
-echo Starting GAE development server
 # To turn emailing on, add the option '--enable_sendmail=yes' and change the relevant
 # settings in feconf.py. Be careful with this -- you do not want to spam people
 # accidentally!
 
 if ! [[ "$FORCE_PROD_MODE" == "True" ]]; then
   ($NODE_PATH/bin/node $NODE_MODULE_DIR/gulp/bin/gulp.js watch)&
+  # In prod mode webpack is launched through scripts/build.py
+  echo Compiling webpack...
+  $NODE_MODULE_DIR/webpack/bin/webpack.js --config webpack.dev.config.ts
   ($NODE_MODULE_DIR/webpack/bin/webpack.js --config webpack.dev.config.ts --watch)&
 fi
+echo Starting GAE development server
 (python $GOOGLE_APP_ENGINE_HOME/dev_appserver.py $CLEAR_DATASTORE_ARG $ENABLE_CONSOLE_ARG --admin_host 0.0.0.0 --admin_port 8000 --host 0.0.0.0 --port 8181 --skip_sdk_update_check true app.yaml)&
 
 # Wait for the servers to come up.

webpack.config.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 var CleanWebpackPlugin = require('clean-webpack-plugin');
+var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 var htmlMinifyConfig = {
@@ -352,5 +353,6 @@ module.exports = {
       minify: htmlMinifyConfig,
       inject: false
     }),
+    new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true })
   ]
 };

webpack.dev.config.ts

@@ -26,12 +26,29 @@ module.exports = {
   entry: commonWebpackConfig.entries,
   plugins: commonWebpackConfig.plugins,
   module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: 'ts-loader',
-      }
-    ]
+    rules: [{
+      test: /\.ts$/,
+      include: [
+        path.resolve(__dirname, 'core/templates/dev/head'),
+        path.resolve(__dirname, 'typings')
+      ],
+      use: [
+        'cache-loader',
+        {
+          loader: 'thread-loader',
+          options: {
+            poolTimeout: Infinity,
+          }
+        },
+        {
+          loader: 'ts-loader',
+          options: {
+            // this is needed for thread-loader to work correctly
+            happyPackMode: true
+          }
+        }
+      ]
+    }]
   },
   output: {
     filename: '[name].bundle.js',

webpack.prod.config.ts

@@ -26,12 +26,24 @@ module.exports = {
   entry: commonWebpackConfig.entries,
   plugins: commonWebpackConfig.plugins,
   module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: 'ts-loader',
-      }
-    ]
+    rules: [{
+      test: /\.ts$/,
+      include: [
+        path.resolve(__dirname, 'core/templates/dev/head'),
+        path.resolve(__dirname, 'typings')
+      ],
+      use: [
+        'cache-loader',
+        'thread-loader',
+        {
+          loader: 'ts-loader',
+          options: {
+            // this is needed for thread-loader to work correctly
+            happyPackMode: true
+          }
+        }
+      ]
+    }]
   },
   output: {
     filename: '[name].[contenthash].bundle.js',