build: upgrade to webpack5

package.json

@@ -122,18 +122,19 @@
     "jsdom": "^20.0.0",
     "jsdom-worker": "^0.2.1",
     "node-fetch": "^2.6.7",
+    "node-polyfill-webpack-plugin": "^3.0.0",
     "offline-iconfont": "^1.2.0",
     "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
     "semver": "^7.5.2",
     "simple-git": "^3.3.0",
     "temp": "^0.9.4",
     "ts-jest": "^29.1.0",
-    "ts-loader": "^8.2.0",
+    "ts-loader": "^9.5.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.0",
     "typescript": "4.9.3",
-    "webpack": "^4.39.3"
+    "webpack": "^5.90.0"
   },
   "workspaces": [
     "packages/*",

packages/components/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { ProgressPlugin } = require('webpack');
@@ -9,6 +10,7 @@ const tsConfigPath = path.join(__dirname, '../../configs/ts/references/tsconfig.
 
 /** @type { import('webpack').Configuration } */
 module.exports = {
+  mode: process.env.NODE_ENV || 'development',
   entry: path.join(__dirname, './src/index.ts'),
   output: {
     filename: 'index.js',
@@ -22,15 +24,10 @@ module.exports = {
       filename: 'index.css',
     }),
     !process.env.CI && new ProgressPlugin(),
+    new NodePolyfillPlugin({
+      includeAliases: ['path', 'process', 'util'],
+    }),
   ].filter(Boolean),
-  node: {
-    net: 'empty',
-    child_process: 'empty',
-    path: 'empty',
-    url: false,
-    fs: 'empty',
-    process: 'mock',
-  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json', '.less'],
     plugins: [
@@ -47,15 +44,11 @@ module.exports = {
       },
       {
         test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/',
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          filename: './fonts/[name][ext]',
+          outputPath: 'fonts/',
+        },
       },
       {
         test: /\.tsx?$/,
@@ -94,7 +87,9 @@ module.exports = {
             options: {
               importLoaders: 1,
               sourceMap: false,
-              localIdentName: '[local]___[hash:base64:5]',
+              modules: {
+                localIdentName: '[local]_[hash:base64:5]',
+              },
             },
           },
           {

packages/extension/webpack.config.worker.js

@@ -1,32 +1,33 @@
-const fs = require('fs');
 const path = require('path');
 
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const { ProgressPlugin } = require('webpack');
 
 const tsconfigPath = path.join(__dirname, '../../configs/ts/references/tsconfig.extension.json');
 
-const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, './package.json'), 'utf-8'));
-
 /** @type { import('webpack').Configuration } */
 module.exports = {
+  mode: process.env.NODE_ENV || 'development',
   entry: path.join(__dirname, './src/hosted/worker.host-preload.ts'),
-  node: {
-    net: 'empty',
-  },
   output: {
+    // disable webpack default publicPath
+    publicPath: '',
     filename: 'worker-host.js',
     path: path.resolve(__dirname, 'lib/'),
-    // library: `extend-browser-worker-${pkg.name}`,
-    // libraryTarget: 'umd'
   },
   target: 'webworker',
-  devtool: 'none',
-  mode: 'none',
+  devtool: false,
   optimization: {
     minimize: false,
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
+    fallback: {
+      net: false,
+      path: false,
+      os: false,
+      crypto: false,
+    },
   },
   module: {
     rules: [
@@ -36,5 +37,10 @@ module.exports = {
       { test: /\.css$/, loader: 'null-loader' },
     ],
   },
-  plugins: [!process.env.CI && new ProgressPlugin()].filter(Boolean),
+  plugins: [
+    !process.env.CI && new ProgressPlugin(),
+    new NodePolyfillPlugin({
+      includeAliases: ['process', 'Buffer'],
+    }),
+  ].filter(Boolean),
 };

packages/remote-cli/package.json

@@ -12,7 +12,7 @@
   "typings": "lib/index.d.ts",
   "scripts": {
     "prepublishOnly": "yarn run build",
-    "build": "webpack --config=webpack.config.js --progress"
+    "build": "webpack --config=webpack.config.js"
   },
   "repository": {
     "type": "git",

packages/remote-cli/webpack.config.js

@@ -1,19 +1,23 @@
 const path = require('path');
 
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const webpack = require('webpack');
 
 const tsConfigPath = path.join(__dirname, './tsconfig.json');
 const srcDir = path.join(__dirname, './src');
 const distDir = path.join(__dirname, './dist');
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = {
   entry: path.join(srcDir, './index.ts'),
   target: 'node',
   output: {
     filename: 'cli.js',
     path: distDir,
   },
-  devtool: 'null',
+  devtool: false,
   mode: 'production',
   node: false,
   resolve: {
@@ -40,6 +44,6 @@ module.exports = {
   resolveLoader: {
     extensions: ['.ts', '.tsx', '.js', '.json', '.less'],
     mainFields: ['loader', 'main'],
-    moduleExtensions: ['-loader'],
   },
+  plugins: [!process.env.CI && new webpack.ProgressPlugin()].filter(Boolean),
 };

packages/startup/package.json

@@ -112,23 +112,20 @@
   "devDependencies": {
     "@opensumi/ide-dev-tool": "workspace:*",
     "browserfs": "^1.4.3",
-    "css-loader": "^2.1.1",
+    "css-loader": "^6.9.1",
     "electron": "^22.3.21",
-    "file-loader": "^3.0.1",
-    "less-loader": "^6.0.0",
+    "less-loader": "^12.1.0",
     "nodemon": "^2.0.15",
     "npm-run": "^5.0.1",
     "npm-run-all": "^4.1.5",
     "react-dom": "^18.0.0",
-    "serviceworker-webpack-plugin": "^1.0.1",
-    "style-loader": "^0.23.1",
-    "style-resources-loader": "^1.2.1",
-    "ts-loader": "^6.0.1",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
     "ts-node": "^10.0.0",
-    "tsconfig-paths": "^3.8.0",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "webpack": "^4.39.3",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-dev-server": "3.8.0"
+    "tsconfig-paths": "^4.2.0",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "webpack": "^5.90.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-dev-server": "4.15.1"
   }
 }

packages/startup/webpack.lite.config.js

@@ -7,7 +7,7 @@ const baseDir = path.join(__dirname, 'entry/web-lite');
 
 const { createWebpackConfig } = require('@opensumi/ide-dev-tool/src/webpack');
 module.exports = createWebpackConfig(baseDir, path.join(baseDir, 'app.tsx'), {
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  mode: process.env.NODE_ENV || 'development',
   resolve: {
     alias: {
       fs: 'browserfs/dist/shims/fs.js',
@@ -18,25 +18,22 @@ module.exports = createWebpackConfig(baseDir, path.join(baseDir, 'app.tsx'), {
       bfsGlobal: require.resolve('browserfs'),
     },
   },
+  node: false,
   plugins: [
     // Expose BrowserFS, process, and Buffer globals.
     // NOTE: If you intend to use BrowserFS in a script tag, you do not need
     // to expose a BrowserFS global.
     new webpack.ProvidePlugin({ BrowserFS: 'bfsGlobal', process: 'processGlobal', Buffer: 'bufferGlobal' }),
-    // FIXME: not working
-    new CopyPlugin([
-      {
-        from: path.join(__dirname, '../extension/lib/worker-host.js'),
-        to: path.join(baseDir, './dist/worker-host.js'),
-      },
-    ]),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.join(__dirname, '../extension/lib/worker-host.js'),
+          to: path.join(baseDir, './dist/worker-host.js'),
+        },
+      ],
+    }),
     !process.env.CI && new webpack.ProgressPlugin(),
   ]
     .concat(process.env.analysis ? new BundleAnalyzerPlugin() : null)
     .filter(Boolean),
-  // DISABLE Webpack's built-in process and Buffer polyfills!
-  node: {
-    process: false,
-    Buffer: false,
-  },
 });

packages/startup/webpack.standard.config.js

@@ -3,6 +3,6 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const { createWebpackConfig } = require('@opensumi/ide-dev-tool/src/webpack');
 
 module.exports = createWebpackConfig(__dirname, require('path').join(__dirname, 'entry/web/app.tsx'), {
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-  plugins: [].concat(process.env.analysis ? new BundleAnalyzerPlugin() : null).filter(Boolean),
+  mode: process.env.NODE_ENV || 'development',
+  plugins: [process.env.analysis && new BundleAnalyzerPlugin()].filter(Boolean),
 });

packages/utils/src/os.ts

@@ -47,24 +47,26 @@ export function isElectronEnv(): boolean {
   return isElectronRenderer() || isElectronNode();
 }
 
+const safeGlobal: any = typeof global === 'undefined' ? (typeof window === 'undefined' ? {} : window) : global;
+
 /**
  * @deprecated isElectronRenderer will be removed in v2.26, please use appConfig#isElectronRenderer instead.
  */
 export function isElectronRenderer() {
   return (
-    (global as any).isElectronRenderer ||
+    safeGlobal.isElectronRenderer ||
     (typeof navigator === 'object' &&
       typeof navigator.userAgent === 'string' &&
       navigator.userAgent.indexOf('Electron') >= 0)
   );
 }
 
 export function isElectronNode() {
-  return process && process.env && !!process.env.ELECTRON_RUN_AS_NODE;
+  return typeof process !== 'undefined' && process.env && !!process.env.ELECTRON_RUN_AS_NODE;
 }
 
 export function isDevelopment() {
-  return (global as any).isDev || (process && process.env.IS_DEV);
+  return safeGlobal.isDev || (typeof process !== 'undefined' && process.env.IS_DEV);
 }
 
 /**