html: update webpack

html/gulpfile.js

@@ -1,16 +1,14 @@
-const gulp = require('gulp'),
-    clean = require('gulp-clean'),
-    inlinesource = require('gulp-inline-source');
+const { src, dest, task } = require("gulp");
+const clean = require('gulp-clean');
+const inlinesource = require('gulp-inline-source');
 
-gulp.task('clean', function () {
-    return gulp.src('dist', {read: false})
+task('clean', () => {
+    return src('dist', {read: false, allowEmpty: true})
         .pipe(clean());
 });
 
-gulp.task('inlinesource', function () {
-    return gulp.src('dist/index.html')
+task('default', () => {
+    return src('dist/index.html')
         .pipe(inlinesource())
-        .pipe(gulp.dest('../src/'));
-});
-
-gulp.task('default', ['inlinesource']);
+        .pipe(dest('../src/'));
+});

html/js/app.ts

@@ -2,10 +2,10 @@ import '../sass/app.scss';
 
 import { Terminal, ITerminalOptions, IDisposable } from 'xterm';
 import * as fit from 'xterm/lib/addons/fit/fit'
+import * as Zmodem from 'zmodem.js/src/zmodem_browser';
+
 import * as overlay from './overlay'
 import { Modal } from './zmodem'
-import * as Zmodem from 'zmodem.js/src/zmodem_browser';
-import * as urljoin from 'url-join';
 
 Terminal.applyAddon(fit);
 Terminal.applyAddon(overlay);
@@ -29,7 +29,8 @@ declare let window: IWindowWithTerminal;
 const modal = new Modal();
 const terminalContainer = document.getElementById('terminal-container');
 const protocol = window.location.protocol === 'https:' ? 'wss://': 'ws://';
-const url = urljoin(protocol, window.location.host, window.location.pathname, 'ws', window.location.search);
+const wsPath = window.location.pathname.endsWith('/') ? 'ws' : '/ws';
+const url = [protocol, window.location.host, window.location.pathname, wsPath, window.location.search].join('');
 const textDecoder = new TextDecoder();
 const textEncoder = new TextEncoder();
 
@@ -153,7 +154,7 @@ let openWs = function() {
         // https://stackoverflow.com/a/27923937/1727928
         window.addEventListener('resize', () => {
             clearTimeout(window.resizeTimeout);
-            window.resizeTimeout = setTimeout(() => term.fit(), 250);
+            window.resizeTimeout = <number><any>setTimeout(() => term.fit(), 250);
         });
         window.addEventListener('beforeunload', unloadCallback);
 
@@ -209,7 +210,7 @@ let openWs = function() {
         window.removeEventListener('beforeunload', unloadCallback);
         // 1000: CLOSE_NORMAL
         if (event.code !== 1000 && autoReconnect > 0) {
-            term.reconnectTimeout = setTimeout(openWs, autoReconnect * 1000);
+            term.reconnectTimeout = <number><any>setTimeout(openWs, autoReconnect * 1000);
         }
     };
 };

html/package.json

@@ -10,35 +10,33 @@
     "author": "Shuanglei Tao <tsl0922@gmail.com>",
     "license": "MIT",
     "scripts": {
-        "build": "NODE_ENV=production webpack --config webpack.prod.js && gulp",
-        "start": "gulp clean && webpack-serve webpack.dev.js"
+        "build": "NODE_ENV=production npx wp --config webpack.prod.js && gulp",
+        "start": "gulp clean && npx webpack-dev-server --config webpack.dev.js"
     },
     "dependencies": {
-        "url-join": "^4.0.0",
         "xterm": "^3.13.0",
         "zmodem.js": "^0.1.9"
     },
     "devDependencies": {
-        "copy-webpack-plugin": "^4.5.1",
-        "css-loader": "^0.28.8",
-        "gulp": "^3.9.1",
+        "copy-webpack-plugin": "^5.0.3",
+        "css-loader": "^2.1.1",
+        "gulp": "^4.0.2",
         "gulp-clean": "^0.4.0",
-        "gulp-inline-source": "^3.1.0",
+        "gulp-inline-source": "^4.0.0",
         "html-webpack-inline-source-plugin": "^0.0.10",
         "html-webpack-plugin": "^3.2.0",
-        "http-proxy-middleware": "^0.18.0",
-        "koa-connect": "^2.0.1",
-        "mini-css-extract-plugin": "^0.4.0",
-        "node-sass": "^4.7.2",
-        "optimize-css-assets-webpack-plugin": "^4.0.1",
-        "sass-loader": "^6.0.6",
-        "style-loader": "^0.19.1",
+        "mini-css-extract-plugin": "^0.6.0",
+        "node-sass": "^4.12.0",
+        "optimize-css-assets-webpack-plugin": "^5.0.1",
+        "sass-loader": "^7.1.0",
+        "style-loader": "^0.23.1",
+        "terser-webpack-plugin": "^1.2.4",
         "ts-loader": "^6.0.0",
         "typescript": "^3.4.5",
-        "uglifyjs-webpack-plugin": "^1.2.5",
-        "webpack": "^4.6.0",
-        "webpack-cli": "^2.1.2",
-        "webpack-merge": "^4.1.2",
-        "webpack-serve": "^0.3.2"
+        "webpack": "^4.31.0",
+        "webpack-cli": "^3.3.2",
+        "webpack-dev-server": "^3.3.1",
+        "webpack-merge": "^4.2.1",
+        "webpack-nano": "^0.6.2"
     }
 }

html/webpack.config.js

@@ -3,7 +3,9 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const devMode = process.env.NODE_ENV !== 'production';
 
 module.exports = {
-    entry: './js/app.ts',
+    entry: {
+        app: './js/app.ts'
+    },
     output: {
         path: __dirname + '/dist',
         filename: devMode ? '[name].js' : '[name].[hash].js',
@@ -40,5 +42,5 @@ module.exports = {
     performance : {
         hints : false
     },
-    devtool: 'inline-source-map',
+    devtool: 'source-map',
 };

html/webpack.dev.js

@@ -1,31 +1,24 @@
+const path = require('path');
 const merge = require('webpack-merge');
-const convert = require('koa-connect');
-const proxy = require('http-proxy-middleware');
 const config = require('./webpack.config.js');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = merge(config, {
     mode: 'development',
+    devServer: {
+        contentBase: path.join(__dirname, 'dist'),
+        compress: true,
+        port: 9000,
+        proxy: [{
+            context: ['/auth_token.js', '/ws'],
+            target: 'http://localhost:7681',
+            ws: true
+        }]
+    },
     plugins: [
         new HtmlWebpackPlugin({
-            template: 'index.html',
-        }),
-    ],
-    serve: {
-        content: __dirname + '/dist',
-        add: (app, middleware, options) => {
-            var ttydProxy = proxy(
-                [
-                    '/ws',
-                    '/auth_token.js',
-                ],
-                {
-                    target: 'http://127.0.0.1:7681',
-                    ws: true,
-                }
-            );
-            app.use(convert(ttydProxy));
-        },
-    }
+            template: 'index.html'
+        })
+    ]
 });

html/webpack.prod.js

@@ -4,17 +4,23 @@ const config = require('./webpack.config.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = merge(config, {
     mode: 'production',
     optimization: {
         minimizer: [
-            new UglifyJsPlugin({
-                cache: true,
-                parallel: true,
+            new TerserPlugin({
+                sourceMap: true
+            }),
+            new OptimizeCSSAssetsPlugin({
+                cssProcessorOptions: {
+                    map: {
+                        inline: false,
+                        annotation: true
+                    }
+                }
             }),
-            new OptimizeCSSAssetsPlugin({}),
         ]
     },
     plugins: [