MM-52536 Webpack unification part 1 (#23322)

* MM-52536 Update Webpack and use the same version for all products * Switch Channels to use asset modules * Remove unused module configuration from Boards/Playbooks * Remove file-loader and html-loader * Unify versions of CSS-related loaders * Remove unused webpack-node-externals dependency * Add missing MiniCssExtractPlugin to Boards/Playbooks production builds
2023-05-10 15:20:16 -04:00
--- a/webapp/channels/package.json
+++ b/webapp/channels/package.json
@@ -15,8 +15,8 @@
    "@mattermost/types": "*",
    "@mui/base": "5.0.0-alpha.127",
    "@mui/material": "5.11.16",
-    "@mui/system": "5.11.16",
    "@mui/styled-engine-sc": "5.11.11",
+    "@mui/system": "5.11.16",
    "@stripe/react-stripe-js": "1.13.0",
    "@stripe/stripe-js": "1.41.0",
    "@tippyjs/react": "4.2.6",
@@ -89,7 +89,6 @@
    "redux-thunk": "2.4.2",
    "regenerator-runtime": "0.13.10",
    "rudder-sdk-js": "1.0.16",
-    "sass": "1.56.1",
    "semver": "7.3.8",
    "serialize-error": "8.0.1",
    "shallow-equals": "1.0.0",
@@ -157,7 +156,6 @@
    "babel-plugin-typescript-to-proptypes": "1.4.2",
    "bundle-loader": "0.2.0",
    "copy-webpack-plugin": "11.0.0",
-    "css-loader": "5.2.6",
    "dotenv-webpack": "8.0.1",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-17-updated": "1.0.2",
@@ -170,8 +168,6 @@
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "external-remotes-plugin": "1.0.0",
-    "file-loader": "6.2.0",
-    "html-loader": "2.1.2",
    "html-webpack-plugin": "5.5.0",
    "identity-obj-proxy": "3.0.0",
    "image-webpack-loader": "8.1.0",
@@ -182,14 +178,12 @@
    "jest-junit": "12.2.0",
    "jest-styled-components": "7.1.1",
    "jest-watch-typeahead": "0.6.4",
-    "mini-css-extract-plugin": "2.0.0",
    "mmjstool": "github:mattermost/mattermost-utilities#237c2194aa646021535c54e4aafed084807b93a6",
    "nock": "13.2.8",
    "prettier": "2.3.2",
    "react-router-enzyme-context": "1.2.0",
    "redux-mock-store": "1.5.4",
    "redux-persist-node-storage": "2.0.0",
-    "sass-loader": "13.2.0",
    "style-loader": "3.0.0",
    "stylelint": "13.13.1",
    "stylelint-config-idiomatic-order": "8.1.0",
@@ -199,12 +193,8 @@
    "stylelint-order": "4.1.0",
    "stylelint-scss": "3.19.0",
    "terser-webpack-plugin": "5.3.6",
-    "webpack": "5.74.0",
    "webpack-bundle-analyzer": "4.7.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.11.1",
    "webpack-livereload-plugin": "3.0.2",
-    "webpack-node-externals": "3.0.0",
    "webpack-pwa-manifest": "4.3.0",
    "yargs": "16.2.0",
    "yup": "0.32.11"
--- a/webapp/channels/src/types/external/highlightjs.d.ts
+++ b/webapp/channels/src/types/external/highlightjs.d.ts
@@ -63,3 +63,8 @@ declare module 'highlight.js/lib/languages/verilog.js';
 declare module 'highlight.js/lib/languages/vhdl.js';
 declare module 'highlight.js/lib/languages/xml.js';
 declare module 'highlight.js/lib/languages/yaml.js';
+
+declare module 'highlight.js/styles/*.css' {
+    const url: string;
+    export default url;
+}
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -29,16 +29,10 @@ import {t} from 'utils/i18n';

 import {CustomStatusDuration} from '@mattermost/types/users';

-import githubCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/github.css';
-
-// eslint-disable-line import/order
-import monokaiCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/monokai.css';
-
-// eslint-disable-line import/order
-import solarizedDarkCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/base16/solarized-dark.css';
-
-// eslint-disable-line import/order
-import solarizedLightCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/base16/solarized-light.css'; // eslint-disable-line import/order
+import githubCSS from 'highlight.js/styles/github.css';
+import monokaiCSS from 'highlight.js/styles/monokai.css';
+import solarizedDarkCSS from 'highlight.js/styles/base16/solarized-dark.css';
+import solarizedLightCSS from 'highlight.js/styles/base16/solarized-light.css';

 export const SettingsTypes = {
    TYPE_TEXT: 'text',
--- a/webapp/channels/src/utils/utils.tsx
+++ b/webapp/channels/src/utils/utils.tsx
@@ -640,12 +640,12 @@ function changeCss(className: string, classValue: string) {
    }
 }

-function updateCodeTheme(userTheme: string) {
+function updateCodeTheme(codeTheme: string) {
    let cssPath = '';
    Constants.THEME_ELEMENTS.forEach((element) => {
        if (element.id === 'codeTheme') {
-            (element.themes as any).forEach((theme: Theme) => {
-                if (userTheme === theme.id) {
+            element.themes?.forEach((theme) => {
+                if (codeTheme === theme.id) {
                    cssPath = theme.cssURL!;
                }
            });
--- a/webapp/channels/tsconfig.json
+++ b/webapp/channels/tsconfig.json
@@ -27,7 +27,6 @@
        "mattermost-redux/*": ["packages/mattermost-redux/src/*"],
        "reselect": ["packages/reselect/src"],
        "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"],
-        "!!file-loader*": ["utils/empty-string"],
    }
  },
  "include": [
--- a/webapp/channels/webpack.config.js
+++ b/webapp/channels/webpack.config.js
@@ -3,7 +3,6 @@

 /* eslint-disable no-console, no-process-env */

-const childProcess = require('child_process');
 const path = require('path');

 const url = require('url');
@@ -12,7 +11,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
 const webpack = require('webpack');
 const {ModuleFederationPlugin} = require('webpack').container;
-const nodeExternals = require('webpack-node-externals');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
@@ -25,7 +23,6 @@ const packageJson = require('./package.json');
 const NPM_TARGET = process.env.npm_lifecycle_event;

 const targetIsRun = NPM_TARGET?.startsWith('run');
-const targetIsTest = NPM_TARGET === 'test';
 const targetIsStats = NPM_TARGET === 'stats';
 const targetIsDevServer = NPM_TARGET?.startsWith('dev-server');
 const targetIsEslint = NPM_TARGET === 'check' || NPM_TARGET === 'fix' || process.env.VSCODE_CWD;
@@ -55,11 +52,12 @@ if (DEV) {
 const buildTimestamp = Date.now();

 var config = {
-    entry: ['./src/root.tsx', './src/root.html'],
+    entry: ['./src/root.tsx'],
    output: {
        publicPath,
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].js',
+        assetModuleFilename: 'files/[contenthash][ext]',
        clean: true,
    },
    module: {
@@ -77,25 +75,29 @@ var config = {
                },
            },
            {
-                type: 'javascript/auto',
                test: /\.json$/,
                include: [
                    path.resolve(__dirname, 'src/i18n'),
                ],
                exclude: [/en\.json$/],
-                use: [
-                    {
-                        loader: 'file-loader?name=i18n/[name].[contenthash].[ext]',
-                    },
-                ],
+                type: 'asset/resource',
+                generator: {
+                    filename: 'i18n/[name].[contenthash].json',
+                },
            },
            {
                test: /\.(css|scss)$/,
+                exclude: /\/highlight\.js\//,
                use: [
                    DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                    },
+                ],
+            },
+            {
+                test: /\.scss$/,
+                use: [
                    {
                        loader: 'sass-loader',
                        options: {
@@ -108,13 +110,8 @@ var config = {
            },
            {
                test: /\.(png|eot|tiff|svg|woff2|woff|ttf|gif|mp3|jpg)$/,
+                type: 'asset/resource',
                use: [
-                    {
-                        loader: 'file-loader',
-                        options: {
-                            name: 'files/[contenthash].[ext]',
-                        },
-                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {},
@@ -123,25 +120,11 @@ var config = {
            },
            {
                test: /\.apng$/,
-                use: [
-                    {
-                        loader: 'file-loader',
-                        options: {
-                            name: 'files/[contenthash].[ext]',
-                        },
-                    },
-                ],
+                type: 'asset/resource',
            },
            {
-                test: /\.html$/,
-                use: [
-                    {
-                        loader: 'html-loader',
-                        options: {
-                            sources: false,
-                        },
-                    },
-                ],
+                test: /\/highlight\.js\/.*\.css$/,
+                type: 'asset/resource',
            },
        ],
    },
@@ -461,13 +444,6 @@ config.plugins.push(new webpack.DefinePlugin({
    'process.env': env,
 }));

-// Test mode configuration
-if (targetIsTest) {
-    config.entry = ['.src/root.tsx'];
-    config.target = 'node';
-    config.externals = [nodeExternals()];
-}
-
 if (targetIsDevServer) {
    const proxyToServer = {
        logLevel: 'silent',