refactor: 📦 use webpack-plugin-esbuild (#23930)

* 📦 use webpack-plugin-esbuild

* rename esbuild-webpack-plugin

* fix npm run dist error

* fix npm run dist error

* code style improve

* remove extra finalizeDist

* Add process.env.ESBUILD

.antd-tools.config.js

@@ -156,4 +156,3 @@ module.exports = {
   },
   generateThemeFileContent,
 };
-finalizeDist();

package.json

@@ -181,6 +181,7 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
+    "esbuild-webpack-plugin": "^1.0.0-beta.3",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.0",
     "eslint-config-prettier": "^6.0.0",

site/bisheng.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const replaceLib = require('@ant-design/tools/lib/replaceLib');
 const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
+const EsbuildPlugin = require('esbuild-webpack-plugin').default;
 const { version } = require('../package.json');
 
 const { webpack } = getWebpackConfig;
@@ -134,6 +135,9 @@ module.exports = {
       // Resolve use react hook fail when yarn link or npm link
       // https://github.com/webpack/webpack/issues/8607#issuecomment-453068938
       config.resolve.alias = { ...config.resolve.alias, react: require.resolve('react') };
+    } else if (process.env.ESBUILD) {
+      // use esbuild
+      config.optimization.minimizer = [new EsbuildPlugin()];
     }
 
     alertBabelConfig(config.module.rules);

webpack.config.js

@@ -3,6 +3,7 @@
 const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
 const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const EsbuildPlugin = require('esbuild-webpack-plugin').default;
 const darkVars = require('./scripts/dark-vars');
 const compactVars = require('./scripts/compact-vars');
 
@@ -48,7 +49,12 @@ function processWebpackThemeConfig(themeConfig, theme, vars) {
     config.module.rules.forEach(rule => {
       // filter less rule
       if (rule.test instanceof RegExp && rule.test.test('.less')) {
-        rule.use[rule.use.length - 1].options.modifyVars = vars;
+        const lessRule = rule.use[rule.use.length - 1];
+        if (lessRule.options.lessOptions) {
+          lessRule.options.lessOptions.modifyVars = vars;
+        } else {
+          lessRule.options.modifyVars = vars;
+        }
       }
     });
 
@@ -61,6 +67,7 @@ function processWebpackThemeConfig(themeConfig, theme, vars) {
 const webpackConfig = getWebpackConfig(false);
 const webpackDarkConfig = getWebpackConfig(false);
 const webpackCompactConfig = getWebpackConfig(false);
+
 if (process.env.RUN_ENV === 'PRODUCTION') {
   webpackConfig.forEach(config => {
     ignoreMomentLocale(config);
@@ -68,6 +75,10 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
     addLocales(config);
     // Reduce non-minified dist files size
     config.optimization.usedExports = true;
+    // use esbuild
+    if (process.env.CSB_REPO) {
+      config.optimization.minimizer[0] = new EsbuildPlugin();
+    }
     // skip codesandbox ci
     if (!process.env.CSB_REPO) {
       config.plugins.push(