webpack: Upgrade webpack version 4.5.0.

Upgrade webpack to latest version at the time of authoring. This
involves upgrading webpack version and its loaders to compatible
versions. It also involved editing tools/webpack to use the
executable for webpack-cli instead because of a change in how the
webpack package wants you to handle shell execution.
It also fixes the confugration for TypeScript in the webpack config
as that was previously broken. Including TypeScript files in JS
files compiled by webpack now works.

package.json

@@ -6,14 +6,14 @@
   "main": "",
   "dependencies": {
     "@types/node": "8.0.34",
-    "@types/webpack": "3.0.13",
+    "@types/webpack": "4.1.3",
     "blueimp-md5": "2.10.0",
     "clipboard": "2.0.0",
     "emoji-datasource-apple": "3.0.0",
     "emoji-datasource-emojione": "3.0.0",
     "emoji-datasource-google": "3.0.0",
     "emoji-datasource-twitter": "3.0.0",
-    "expose-loader": "0.7.3",
+    "expose-loader": "0.7.5",
     "flatpickr": "4.2.3",
     "fuzzysearch": "1.0.3",
     "handlebars": "4.0.10",
@@ -35,13 +35,14 @@
     "string.prototype.endswith": "0.2.0",
     "string.prototype.startswith": "0.2.0",
     "to-markdown": "3.1.0",
-    "ts-loader": "2.1.0",
+    "ts-loader": "4.2.0",
     "ts-node": "3.3.0",
     "typescript": "2.7.2",
     "underscore": "1.8.3",
     "webfonts-generator": "0.4.0",
-    "webpack": "2.5.1",
+    "webpack": "4.5.0",
     "webpack-bundle-tracker": "0.3.0",
+    "webpack-cli": "2.0.14",
     "winchan": "0.2.0",
     "xdate": "0.8.2",
     "zxcvbn": "4.4.2"
@@ -60,7 +61,7 @@
     "svgo": "0.7.2",
     "swagger-parser": "3.4.1",
     "tslint": "5.3.2",
-    "webpack-dev-server": "2.4.1",
+    "webpack-dev-server": "3.1.3",
     "xmlhttprequest": "1.5.0"
   },
   "scripts": {

static/ts/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "outDir": "../webpack-bundles/",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
@@ -13,6 +12,5 @@
     "target": "es5",
     "jsx": "react",
     "allowJs": false
-  },
+  }
-  "rootDir": "../.."
 }

tools/webpack

@@ -21,7 +21,7 @@ STATIC_PATH = 'static/'
 def run():
     # type: () -> None
     """Builds for production, writing the output to disk"""
-    subprocess.check_call(['node', 'node_modules/.bin/webpack'] +
+    subprocess.check_call(['node', 'node_modules/.bin/webpack-cli'] +
                           ['--config', 'tools/webpack.config.ts', '-p'] +
                           ['--env', 'production'])
 
@@ -29,7 +29,7 @@ def run_watch(host, port, minify):
     # type: (str, str, bool) -> None
     """watches and rebuilds on changes, serving files from memory via webpack-dev-server"""
     webpack_args = ['node', 'node_modules/.bin/webpack-dev-server']
-    webpack_args += ['--config', 'tools/webpack.config.ts', '--watch-poll', '--port', port, "--host", host]
+    webpack_args += ['--config', 'tools/webpack.config.ts', '--port', port, "--host", host]
     if minify:
         webpack_args.append('--optimize-minimize')
     subprocess.Popen(webpack_args)

tools/webpack.config.ts

@@ -4,16 +4,10 @@ import * as webpack from 'webpack';
 
 const assets = require('./webpack.assets.json');
 
-// Only use the Webpack 2.0 Rule definitions.
+export default (env?: string) : webpack.Configuration => {
-interface Config extends webpack.Configuration {
-  module: {
-    rules: webpack.NewUseRule[]
-  }
-}
-
-export default (env?: string) : Config => {
     const production: boolean = env === "production";
-    let config: Config = {
+    let config: webpack.Configuration = {
+        mode: production ? "production" : "development",
         context: resolve(__dirname, "../"),
         entry: assets,
         module: {
@@ -21,20 +15,10 @@ export default (env?: string) : Config => {
                 // Run the typescript compilier on .ts files before webpack
                 {
                     test: /\.tsx?$/,
-                    use: 'ts-loader',
+                    loader: 'ts-loader',
-                },
+                    options: {
-                // This loads and transforms sourcemap files from other compiliers.
+                        configFile: require.resolve('../static/ts/tsconfig.json')
-                // The typescript comilier will generate a sourcemap and
+                    }
-                // source-map-loader will output the correct sourcemap from that.
-                {
-                    enforce: 'pre',
-                    test: /\.js$/,
-                    use: "source-map-loader",
-                },
-                {
-                    enforce: 'pre',
-                    test: /\.tsx?$/,
-                    use: "source-map-loader",
                 },
                 // Uses script-loader on minified files so we don't change global variables in them.
                 // Also has the effect of making processing these files fast
@@ -94,22 +78,16 @@ export default (env?: string) : Config => {
             new BundleTracker({filename: 'webpack-stats-production.json'}),
         ];
     } else {
-        // Built webpack dev asset reloader
-        config.entry['common'].unshift('webpack/hot/dev-server');
-        // Use 0.0.0.0 so that we can set a port but still use the host
-        // the browser is connected to.
-        config.entry['common'].unshift('webpack-dev-server/client?http://0.0.0.0:9994');
-
         // Out JS debugging tools
         config.entry['common'].push('./static/js/debug.js');
 
         config.output.publicPath = '/webpack/';
         config.plugins = [
             new BundleTracker({filename: 'var/webpack-stats-dev.json'}),
-            // Hot Reload of code in development
-            new webpack.HotModuleReplacementPlugin(),
             // Better logging from console for hot reload
             new webpack.NamedModulesPlugin(),
+            // Hot Reload of code in development
+            new webpack.HotModuleReplacementPlugin(),
             // script-loader should load sourceURL in dev
             new webpack.LoaderOptionsPlugin({debug: true}),
         ];