chore(build): upgrade webpack 4 to webpack 5 (WEBAPP-57855) (#742)

* chore(build): upgrade webpack 4 to webpack 5 (WEBAPP-57855)

Upgrade webpack and related loaders/plugins to webpack 5:
- webpack 4 -> 5, webpack-cli 3 -> 5, webpack-dev-server 3 -> 5
- mini-css-extract-plugin 0.9 -> 2, css-loader 3 -> 7
- postcss-loader 3 -> 8, sass-loader 8 -> 16, style-loader 1 -> 4
- babel-loader 8 -> 9
- Replace optimize-css-assets-webpack-plugin with
  css-minimizer-webpack-plugin
- Replace raw-loader/file-loader with webpack 5 asset modules
- Remove terser-webpack-plugin (webpack 5 built-in)
- Update devServer config for webpack-dev-server 5 API
- Remove deprecated --colors CLI flag

This unblocks WEBAPP-49218 by enabling native support for
package.json exports field, required by @box/blueprint-web-assets
and other modern @box/* packages.

* fix(build): resolve DefinePlugin NODE_ENV conflict

Webpack 5 sets process.env.NODE_ENV via mode option.
Remove duplicate definition from DefinePlugin to fix
conflicting values warning.

Author: jackiejou

package.json

@@ -54,7 +54,7 @@
         "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
-        "babel-loader": "^8.3.0",
+        "babel-loader": "^9.2.1",
         "babel-plugin-istanbul": "^6.0.0",
         "babel-plugin-react-intl": "^7.5.1",
         "babel-plugin-transform-require-ignore": "^0.1.1",
@@ -64,7 +64,8 @@
         "classnames": "^2.2.5",
         "conventional-github-releaser": "^3.1.3",
         "core-js": "^3.38.1",
-        "css-loader": "^3.5.2",
+        "css-loader": "^7.1.2",
+        "css-minimizer-webpack-plugin": "^7.0.4",
         "cypress": "^4.4.1",
         "draft-js": "0.10.5",
         "enzyme": "^3.11.0",
@@ -90,12 +91,10 @@
         "jest-environment-jsdom-sixteen": "^1.0.3",
         "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
-        "mini-css-extract-plugin": "^0.9.0",
+        "mini-css-extract-plugin": "^2.10.1",
         "npm-run-all": "^4.1.5",
-        "optimize-css-assets-webpack-plugin": "^5.0.3",
-        "postcss-loader": "^3.0.0",
+        "postcss-loader": "^8.1.1",
         "prettier": "^1.19.1",
-        "raw-loader": "^4.0.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-intl": "6.4.2",
@@ -105,27 +104,26 @@
         "redux": "^4.0.5",
         "regenerator-runtime": "^0.13.9",
         "sass": "^1.64.1",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^16.0.4",
         "scroll-into-view-if-needed": "^2.2.24",
-        "style-loader": "^1.1.4",
+        "style-loader": "^4.0.0",
         "stylelint": "^12.0.0",
         "stylelint-config-rational-order": "^0.1.2",
         "stylelint-config-standard": "^19.0.0",
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
-        "terser-webpack-plugin": "^4.2.3",
         "typescript": "4.9.5",
         "uuid": "^8.3.1",
         "wait-on": "^4.0.2",
-        "webpack": "^4.47.0",
-        "webpack-cli": "^3.3.11",
-        "webpack-dev-server": "^3.10.3",
+        "webpack": "^5.105.4",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.2.3",
         "worker-farm": "^1.7.0"
     },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",
         "build:i18n": "props2es",
-        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress",
         "build:prod:dist": "LANGUAGE=en-US BABEL_ENV=production NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "clean": "rm -rf dist reports/* i18n/json i18n/*.js",
         "cy:open": "yarn cy:wait; yarn cypress open",

scripts/webpack.common.config.js

@@ -28,14 +28,14 @@ module.exports = () => {
                 },
                 {
                     test: /\.(svg|html)$/,
-                    loader: 'raw-loader',
+                    type: 'asset/source',
                     exclude: [path.resolve('node_modules')],
                 },
                 {
                     test: /\.(jpe?g|png|gif|woff2|woff)$/,
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
+                    type: 'asset/resource',
+                    generator: {
+                        filename: '[name][ext]',
                     },
                     exclude: [path.resolve('node_modules')],
                 },
@@ -50,10 +50,7 @@ module.exports = () => {
                 __LANGUAGE__: JSON.stringify(language),
                 __NAME__: JSON.stringify(packageJSON.name),
                 __VERSION__: JSON.stringify(version),
-                'process.env': {
-                    BABEL_ENV: JSON.stringify(process.env.BABEL_ENV),
-                    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-                },
+                'process.env.BABEL_ENV': JSON.stringify(process.env.BABEL_ENV),
             }),
             new MiniCssExtractPlugin({
                 filename: '[name].css',

scripts/webpack.config.js

@@ -1,10 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const RsyncPlugin = require('@box/frontend/webpack/RsyncPlugin');
 const TranslationsPlugin = require('@box/frontend/webpack/TranslationsPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
 
 const { BannerPlugin } = require('webpack');
 
@@ -31,7 +30,7 @@ const config = Object.assign(commonConfig(), {
         annotations: ['./src/BoxAnnotations.ts'],
     },
     output: {
-        filename: '[Name].js',
+        filename: '[name].js',
         path: path.resolve('dist'),
     },
     resolve: {
@@ -49,10 +48,9 @@ const config = Object.assign(commonConfig(), {
         modules: ['src', 'node_modules'],
     },
     devServer: {
-        contentBase: './test',
-        disableHostCheck: true,
+        static: './test',
+        allowedHosts: 'all',
         host: '0.0.0.0',
-        inline: true,
         port: 8001,
     },
 });
@@ -62,7 +60,7 @@ if (isDev) {
         config.plugins.push(new RsyncPlugin('dist/.', rsyncLocation, 'annotations'));
     }
 
-    config.devtool = isLinked ? 'cheap-module-eval-source-map' : 'source-map';
+    config.devtool = isLinked ? 'eval-cheap-module-source-map' : 'source-map';
     config.plugins.push(new TranslationsPlugin());
     config.plugins.push(
         new CircularDependencyPlugin({
@@ -73,34 +71,13 @@ if (isDev) {
 }
 
 if (isRelease && language === 'en-US') {
-    // https://webpack.js.org/configuration/optimization/#optimization-minimize
     config.optimization = {
         minimizer: [
-            new TerserPlugin({
-                terserOptions: {
-                    warnings: false, // Don't output warnings
-                    compress: {
-                        drop_console: true, // Drop console statements
-                    },
-                    output: {
-                        comments: false, // Remove comments
-                    },
-                },
-                sourceMap: false,
-            }),
+            '...',
+            new CssMinimizerPlugin(),
         ],
     };
 
-    // Optimize CSS - minimize, remove comments and duplicate rules
-    config.plugins.push(
-        new OptimizeCssAssetsPlugin({
-            cssProcessorOptions: {
-                discardComments: { removeAll: true },
-                safe: true,
-            },
-        }),
-    );
-
     // Add license message to top of code
     config.plugins.push(new BannerPlugin(license));
 }

tsconfig.json

@@ -4,6 +4,8 @@
     "compilerOptions": {
         "lib": ["DOM", "ES2020"],
         "jsx": "react-jsx",
-        "esModuleInterop": true
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "types": ["classnames", "draft-js", "enzyme", "jest", "lodash", "react", "react-dom", "react-redux", "uuid"]
     }
 }