refactor: 📦 use webpack-plugin-esbuild (ant-design#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
rockyuse · May 8, 2020 · 612bcdf · 612bcdf
1 parent 3d578c8
commit 612bcdf
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/.antd-tools.config.js b/.antd-tools.config.js
@@ -156,4 +156,3 @@ module.exports = {
   },
   generateThemeFileContent,
 };
-finalizeDist();
diff --git a/package.json b/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",

diff --git a/site/bisheng.config.js b/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);

diff --git a/webpack.config.js b/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,13 +67,18 @@ 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);
     externalMoment(config);
     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(
-Original file line number
+Diff line change
@@ Expand Up / @@ -156,4 +156,3 @@ module.exports = { @@
       },
       generateThemeFileContent,
     };
-    finalizeDist();