[Build] webpack5 upgrade (#4242)

.npmrc

@@ -1 +1,6 @@
 loglevel=warn
+
+# Temporary: istanbul-instrumenter-loader is working with webpack 5, but states
+# webpack 4 being the latest version it supports, so this legacy-peer-deps
+# allows us to install it anyway.
+legacy-peer-deps=true

app.js

@@ -7,7 +7,6 @@
  * node app.js [options]
  */
 
-
 const options = require('minimist')(process.argv.slice(2));
 const express = require('express');
 const app = express();
@@ -40,10 +39,19 @@ app.use('/proxyUrl', function proxyRequest(req, res, next) {
     }).on('error', next)).pipe(res);
 });
 
+class WatchRunPlugin {
+    apply(compiler) {
+        compiler.hooks.emit.tapAsync('WatchRunPlugin', (compilation, callback) => {
+            console.log('Begin compile at ' + new Date());
+            callback();
+        });
+    }
+}
+
 const webpack = require('webpack');
-const webpackConfig = require('./webpack.config.js');
+const webpackConfig = require('./webpack.dev.js');
 webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
+webpackConfig.plugins.push(new WatchRunPlugin());
 
 webpackConfig.entry.openmct = [
     'webpack-hot-middleware/client?reload=true',
@@ -62,9 +70,7 @@ app.use(require('webpack-dev-middleware')(
 
 app.use(require('webpack-hot-middleware')(
     compiler,
-    {
+    {}
-
-    }
 ));
 
 // Expose index.html for development users.
@@ -74,5 +80,5 @@ app.get('/', function (req, res) {
 
 // Finally, open the HTTP server and log the instance to the console
 app.listen(options.port, options.host, function() {
-    console.log('Open MCT application running at %s:%s', options.host, options.port)
+    console.log('Open MCT application running at %s:%s', options.host, options.port);
 });

karma.conf.js

@@ -22,7 +22,6 @@
 
 /*global module,process*/
 
-const devMode = process.env.NODE_ENV !== 'production';
 const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
 const coverageEnabled = process.env.COVERAGE === 'true';
 const reporters = ['spec', 'junit'];
@@ -32,10 +31,10 @@ if (coverageEnabled) {
 }
 
 module.exports = (config) => {
-    const webpackConfig = require('./webpack.config.js');
+    const webpackConfig = require('./webpack.dev.js');
     delete webpackConfig.output;
 
-    if (!devMode || coverageEnabled) {
+    if (coverageEnabled) {
         webpackConfig.module.rules.push({
             test: /\.js$/,
             exclude: /node_modules|example|lib|dist/,

package.json

@@ -13,9 +13,9 @@
     "babel-eslint": "10.1.0",
     "comma-separated-values": "^3.6.4",
     "concurrently": "^3.6.1",
-    "copy-webpack-plugin": "^4.5.2",
+    "copy-webpack-plugin": "^9.0.0",
     "cross-env": "^6.0.3",
-    "css-loader": "^1.0.0",
+    "css-loader": "^4.0.0",
     "d3-axis": "1.0.x",
     "d3-scale": "1.0.x",
     "d3-selection": "1.3.x",
@@ -26,8 +26,7 @@
     "eventemitter3": "^1.2.0",
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
-    "fast-sass-loader": "1.4.6",
+    "file-loader": "^6.1.0",
-    "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
@@ -47,18 +46,17 @@
     "karma-junit-reporter": "2.0.1",
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.32",
-    "karma-webpack": "4.0.2",
+    "karma-webpack": "^5.0.0",
     "location-bar": "^3.0.1",
     "lodash": "^4.17.12",
     "markdown-toc": "^0.11.7",
     "marked": "^0.3.5",
-    "mini-css-extract-plugin": "^0.4.1",
+    "mini-css-extract-plugin": "^1.6.0",
     "minimist": "^1.2.5",
     "moment": "2.25.3",
     "moment-duration-format": "^2.2.2",
     "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
-    "node-sass": "^4.14.1",
     "painterro": "^1.2.56",
     "playwright": "^1.16.3",
     "plotly.js-basic-dist": "^2.5.0",
@@ -66,6 +64,9 @@
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass": "^1.42.1",
+    "sass-loader": "^12.1.0",
     "sinon": "^12.0.1",
     "split": "^1.0.0",
     "style-loader": "^1.0.1",
@@ -75,10 +76,11 @@
     "vue-eslint-parser": "8.0.1",
     "vue-loader": "^15.2.6",
     "vue-template-compiler": "2.5.6",
-    "webpack": "^4.16.2",
+    "webpack": "^5.53.0",
-    "webpack-cli": "^3.1.0",
+    "webpack-cli": "^4.0.0",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.22.3",
+    "webpack-merge": "^5.8.0",
     "zepto": "^1.2.0"
   },
   "scripts": {
@@ -87,9 +89,9 @@
     "start": "node app.js",
     "lint": "eslint platform example src --ext .js,.vue openmct.js",
     "lint:fix": "eslint platform example src --ext .js,.vue openmct.js --fix",
-    "build:prod": "cross-env NODE_ENV=production webpack",
+    "build:prod": "cross-env webpack --config webpack.prod.js",
-    "build:dev": "webpack",
+    "build:dev": "webpack --config webpack.dev.js",
-    "build:watch": "webpack --watch",
+    "build:watch": "webpack --config webpack.dev.js --watch",
     "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
     "test:coverage": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" COVERAGE=true karma start --single-run",

src/MCT.js

@@ -22,7 +22,6 @@
 
 define([
     'EventEmitter',
-    'uuid',
     './BundleRegistry',
     './installDefaultBundles',
     './api/api',
@@ -53,7 +52,6 @@ define([
     'vue'
 ], function (
     EventEmitter,
-    uuid,
     BundleRegistry,
     installDefaultBundles,
     api,

src/plugins/displayLayout/components/layout-frame.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /******************* FRAME */
 .c-frame {
     display: flex;
@@ -89,7 +91,7 @@
                         &:before {
                             // Grippy
                             $h: 4px;
-                            $tbOffset: ($editFrameMovebarH - $h) / 2;
+                            $tbOffset: math.div($editFrameMovebarH - $h, 2);
                             $lrOffset: 25%;
                             @include grippy($editFrameMovebarColorFg);
                             content: '';

src/plugins/flexibleLayout/components/flexible-layout.scss

@@ -1,7 +1,9 @@
+@use 'sass:math';
+
 @mixin containerGrippy($headerSize, $dir) {
     position: absolute;
     $h: 6px;
-    $minorOffset: ($headerSize - $h) / 2;
+    $minorOffset: math.div($headerSize - $h, 2);
     $majorOffset: 35%;
     content: '';
     display: block;

src/plugins/folderView/components/grid-view.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /******************************* GRID VIEW */
 .l-grid-view {
     display: flex;
@@ -42,7 +44,7 @@
     &__type-icon {
         filter: $colorKeyFilter;
         flex: 0 0 $gridItemMobile;
-        font-size: floor($gridItemMobile / 2);
+        font-size: floor(math.div($gridItemMobile, 2));
         margin-right: $interiorMarginLg;
     }
 
@@ -166,7 +168,7 @@
 
         &__type-icon {
             flex: 1 1 auto;
-            font-size: floor($gridItemDesk / 3);
+            font-size: floor(math.div($gridItemDesk, 3));
             margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
             order: 2;
             transform-origin: center;

src/plugins/timeConductor/conductor-axis.scss

@@ -1,6 +1,8 @@
+@use 'sass:math';
+
 .c-conductor-axis {
     $h: 18px;
-    $tickYPos: ($h / 2) + 12px;
+    $tickYPos: math.div($h, 2) + 12px;
 
     @include userSelectNone();
     @include bgTicks($c: rgba($colorBodyFg, 0.4));

src/styles/_constants-mobile.scss

@@ -21,14 +21,15 @@
  *****************************************************************************/
 
 /* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
+@use 'sass:math';
 
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
 $mobileOverlayMargin: 20px;
 $mobileMenuIconD: 25px;
-$phoneItemH: floor($gridItemMobile / 4);
+$phoneItemH: floor(math.div($gridItemMobile, 4));
-$tabletItemH: floor($gridItemMobile / 3);
+$tabletItemH: floor(math.div($gridItemMobile, 3));
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;

src/styles/_controls.scss

@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+@use 'sass:math';
+
 /******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {
@@ -785,7 +787,7 @@ select {
         }
 
         &--swatched {
-            padding-bottom: floor($pTB / 2);
+            padding-bottom: floor(math.div($pTB, 2));
             width: 2em; // Standardize the width
         }
 
@@ -935,7 +937,7 @@ select {
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg, $knobH: 12px, $trackH: 3px) {
     border-radius: 2px;
-    $breakPointPx: floor(($knobH - $trackH) / 2);
+    $breakPointPx: floor(math.div($knobH - $trackH, 2));
     $bp1: $breakPointPx;
     $bp2: $breakPointPx + $trackH;
     box-sizing: border-box;

src/styles/_global.scss

@@ -19,6 +19,9 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@use 'sass:math';
+
 /******************************************************** RESETS */
 *,
 :before,
@@ -308,7 +311,7 @@ body.desktop .has-local-controls {
     }
     &.c-tree__item {
         $d: $waitSpinnerTreeD;
-        $spinnerL: 19 + $d/2;
+        $spinnerL: 19 + math.div($d, 2);
 
         display: flex;
         align-items: center;

src/styles/_legacy-messages.scss

@@ -19,6 +19,9 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@use 'sass:math';
+
 /******************************************************************* MESSAGES */
 .w-message-contents {
     flex: 1 1 auto;
@@ -120,7 +123,7 @@ body.desktop .t-message-list {
 }
 
 // Alert elements in views
-mixin sUnSynced() {
+@mixin sUnSynced {
     $c: $colorPausedBg;
     border: 1px solid $c;
 }

src/styles/_legacy.scss

@@ -19,6 +19,9 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@use 'sass:math';
+
 /*********************************************************************** CLOCKS AND TIMERS */
 .c-clock,
 .c-timer {
@@ -788,7 +791,7 @@ body.desktop {
                 //width: $splitterHandleD;
             }
             &.flush-right {
-                width: ceil($splitterHandleD / 2);
+                width: ceil(math.div($splitterHandleD, 2));
                 &:after {
                     width: $splitterHandleD;
                     left: auto; right: 0;

src/styles/_mixins.scss

@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+@use 'sass:math';
+
 /************************** GLYPHS */
 @mixin glyphBefore($unicode, $family: 'symbolsfont') {
     &:before {
@@ -202,7 +204,7 @@
 
 @mixin bgCheckerboard($c: $colorBodyFg, $opacity: 0.3, $size: 32px, $imp: false) {
     $color: rgba($c, $opacity);
-    $bgPos: floor($size / 2);
+    $bgPos: floor(math.div($size, 2));
 
     $impStr: null;
     @if $imp {
@@ -288,7 +290,7 @@
 @mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
     width: 0;
     height: 0;
-    $slopedB: $size/$ratio solid transparent;
+    $slopedB: math.div($size, $ratio) solid transparent;
     $straightB: $size solid $color;
     @if $dir == "up" {
         border-left: $slopedB;
@@ -780,7 +782,7 @@
 }
 
 
-@mixin sUnsynced() {
+@mixin sUnsynced {
     $c: $colorPausedBg;
     border: 1px solid $c;
 }

src/ui/components/toggle-switch.scss

@@ -1,7 +1,9 @@
+@use 'sass:math';
+
 .c-toggle-switch {
     $d: 12px;
     $m: 2px;
-    $br: $d/1.5;
+    $br: math.div($d, 1.5);
     cursor: pointer;
     display: inline-flex;
     align-items: center;

src/ui/layout/mct-tree.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .c-tree-and-search {
     display: flex;
     flex-direction: column;
@@ -136,7 +138,7 @@
         }
 
         > * + * {
-            margin-left: ceil($interiorMarginSm / 2);
+            margin-left: ceil(math.div($interiorMarginSm, 2));
         }
 
         @include hover {

src/ui/layout/pane.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /**************************** BASE - MOBILE AND DESKTOP */
 .l-multipane {
     display: flex;
@@ -234,7 +236,7 @@
 
                 > .l-pane__handle {
                     left: 0;
-                    transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
+                    transform: translateX(floor(math.div($splitterHandleD, -2))); // Center over the pane edge
                 }
 
                 [class*="expand-button"] {
@@ -251,7 +253,7 @@
 
                 > .l-pane__handle {
                     right: 0;
-                    transform: translateX(floor($splitterHandleD / 2));
+                    transform: translateX(floor(math.div($splitterHandleD, 2)));
                 }
 
                 [class*="expand-button"] {
@@ -287,7 +289,7 @@
                 padding-top: $m;
                 > .l-pane__handle {
                     top: 0;
-                    transform: translateY(floor($splitterHandleD / -1));
+                    transform: translateY(floor(math.div($splitterHandleD, -1)));
                 }
 
                 .l-pane__collapse-button:before {
@@ -306,7 +308,7 @@
             &[class*="-after"] {
                 > .l-pane__handle {
                     bottom: 0;
-                    transform: translateY(floor($splitterHandleD / 1));
+                    transform: translateY(floor(math.div($splitterHandleD, 1)));
                 }
 
                 &:not(.l-pane--collapsed) > .l-pane__collapse-button {

webpack.common.js

@@ -1,25 +1,18 @@
 const path = require('path');
 const packageDefinition = require('./package.json');
-
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const webpack = require('webpack');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const devMode = process.env.NODE_ENV !== 'production';
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
-// TODO: Build Constants w/ git-rev-sync
 const gitRevision = require('child_process')
     .execSync('git rev-parse HEAD')
     .toString().trim();
 const gitBranch = require('child_process')
     .execSync('git rev-parse --abbrev-ref HEAD')
     .toString().trim();
-const vueFile = devMode
-    ? path.join(__dirname, "node_modules/vue/dist/vue.js")
-    : path.join(__dirname, "node_modules/vue/dist/vue.min.js");
 
-const webpackConfig = {
+module.exports = {
-    mode: devMode ? 'development' : 'production',
     entry: {
         openmct: './openmct.js',
         couchDBChangesFeed: './src/plugins/persistence/couch/CouchChangesFeed.js',
@@ -33,7 +26,8 @@ const webpackConfig = {
         filename: '[name].js',
         library: '[name]',
         libraryTarget: 'umd',
-        path: path.resolve(__dirname, 'dist')
+        publicPath: '',
+        clean: true
     },
     resolve: {
         alias: {
@@ -45,7 +39,6 @@ const webpackConfig = {
             "bourbon": "bourbon.scss",
             "plotly-basic": "plotly.js-basic-dist",
             "plotly-gl2d": "plotly.js-gl2d-dist",
-            "vue": vueFile,
             "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
             "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
             "styles": path.join(__dirname, "src/styles"),
@@ -55,21 +48,16 @@ const webpackConfig = {
             "utils": path.join(__dirname, "src/utils")
         }
     },
-    devtool: devMode ? 'eval-source-map' : 'source-map',
     plugins: [
         new webpack.DefinePlugin({
             __OPENMCT_VERSION__: `'${packageDefinition.version}'`,
             __OPENMCT_BUILD_DATE__: `'${new Date()}'`,
             __OPENMCT_REVISION__: `'${gitRevision}'`,
-            __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`,
+            __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`
-            __OPENMCT_ROOT_RELATIVE__: `'${devMode ? 'dist/' : ''}'`
         }),
         new VueLoaderPlugin(),
-        new MiniCssExtractPlugin({
+        new CopyWebpackPlugin({
-            filename: '[name].css',
+            patterns: [
-            chunkFilename: '[name].css'
-        }),
-        new CopyWebpackPlugin([
                 {
                     from: 'src/images/favicons',
                     to: 'favicons'
@@ -80,7 +68,12 @@ const webpackConfig = {
                         return content.toString().replace(/dist\//g, '');
                     }
                 }
-        ])
+            ]
+        }),
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[name].css'
+        })
     ],
     module: {
         rules: [
@@ -88,10 +81,17 @@ const webpackConfig = {
                 test: /\.(sc|sa|c)ss$/,
                 use: [
                     MiniCssExtractPlugin.loader,
-                    'css-loader',
+                    {
-                    'fast-sass-loader'
+                        loader: 'css-loader'
+                    },
+                    'resolve-url-loader',
+                    'sass-loader'
                 ]
             },
+            {
+                test: /\.vue$/,
+                use: 'vue-loader'
+            },
             {
                 test: /\.html$/,
                 use: 'html-loader'
@@ -104,7 +104,7 @@ const webpackConfig = {
                 ]
             },
             {
-                test: /\.(jpg|jpeg|png|svg|ico|woff2?|eot|ttf)$/,
+                test: /\.(jpg|jpeg|png|svg|ico|woff|woff2?|eot|ttf)$/,
                 loader: 'file-loader',
                 options: {
                     name: '[name].[ext]',
@@ -117,26 +117,15 @@ const webpackConfig = {
                             return `icons/${url}`;
                         }
 
-                        if (/\.(woff2?|eot|ttf)$/.test(url)) {
+                        if (/\.(woff|woff2?|eot|ttf)$/.test(url)) {
                             return `fonts/${url}`;
                         } else {
                             return `${url}`;
                         }
                     }
                 }
-            },
-            {
-                test: /\.vue$/,
-                use: 'vue-loader'
             }
         ]
     },
-    stats: {
+    stats: 'detailed'
-        modules: false,
-        timings: true,
-        colors: true,
-        warningsFilter: /asset size limit/g
-    }
 };
-
-module.exports = webpackConfig;

webpack.dev.js

@@ -0,0 +1,20 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = merge(common, {
+    mode: 'development',
+    resolve: {
+        alias: {
+            "vue": path.join(__dirname, "node_modules/vue/dist/vue.js")
+        }
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            __OPENMCT_ROOT_RELATIVE__: '"dist/"'
+        })
+    ],
+    devtool: 'eval-source-map'
+});

webpack.prod.js

@@ -0,0 +1,20 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = merge(common, {
+    mode: 'production',
+    resolve: {
+        alias: {
+            "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js")
+        }
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            __OPENMCT_ROOT_RELATIVE__: '""'
+        })
+    ],
+    devtool: 'source-map'
+});