refactor: build & start

 #!/usr/bin/env node
 #!/usr/bin/env node
-
-const path = require('path');
-const fs = require('fs');
 const execSync = require('child_process').execSync;
 const execSync = require('child_process').execSync;
 const chalk = require('chalk');
 const chalk = require('chalk');
-const getConfigContent = require('../config/defaultConfig.js');
 
 
-const umircCwdFilePath = path.resolve(process.cwd(), '.umirc.js');
+const defaultEnv = ['dev', 'prod']
+const env = process.argv.slice(2).join(' ') || 'prod'
+
+if (!defaultEnv.includes(env)) {
+  console.log(chalk.red('\n 命令不存在'));
+  process.exit(1);
+}
 
 
-async function writeFile() {
-  const content = await getConfigContent();
-  fs.writeFile(umircCwdFilePath, content, (err) => {
-    if (err) {
-      console.log(chalk.red(`文件写入失败, ${err}`));
-      process.exit(1);
-    } else {
-      execSync(`npx cross-env ${process.argv.slice(2).join(' ')} umi build`, { stdio: 'inherit' });
-      fs.unlinkSync(umircCwdFilePath);
-    }
-  });
+if (env === 'prod') {
+  execSync(`npx cross-env NODE_ENV=production webpack build --config ./config/webpack.prod.js`, { stdio: 'inherit' });
 }
 }
 
 
-writeFile();
+if (env === 'dev') {
+  execSync(`npx cross-env NODE_ENV=development webpack build --config ./config/webpack.dev.js`, { stdio: 'inherit' });
+}

 #!/usr/bin/env node
 #!/usr/bin/env node
 
 
-const path = require('path');
-const fs = require('fs');
 const execSync = require('child_process').execSync;
 const execSync = require('child_process').execSync;
-const chalk = require('chalk');
-const getConfigContent = require('../config/defaultConfig.js');
-const { findUsablePort } = require('../utils');
 
 
-const umircCwdFilePath = path.resolve(process.cwd(), '.umirc.js');
-
-async function writeFile() {
-  const port = await findUsablePort(process.env.PORT || 8000);
-  const content = getConfigContent(port);
-
-  fs.writeFile(umircCwdFilePath, content, (err) => {
-    if (err) {
-      console.log(chalk.red(`文件写入失败, ${err}`));
-      process.exit(1);
-    } else {
-      execSync(
-        `npx cross-env ${process.argv
-          .slice(2)
-          .join(' ')} SOCKET_SERVER=http://localhost:${port} umi dev`,
-        { stdio: 'inherit' },
-      );
-      fs.unlinkSync(umircCwdFilePath);
-    }
-  });
-}
-
-writeFile();
+execSync(`npx cross-env NODE_ENV=development vite --force --config ./config/vite.config.js`, { stdio: 'inherit' });

-const getConfigContent = (port) => {
-  return `
-  import { defineConfig } from 'umi';
-  import path from 'path';
-  import fs from 'fs';
-  import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-  import routes from './src/routes'
-  import pkg from './package.json'
-  let userConfig = {};
-  let terserOptions = {};
-  let publicPath =  '/' + pkg.name + '/'
-  
-  if (fs.existsSync(path.resolve(process.cwd(), '.qx.config.js'))) {
-    userConfig = require(path.resolve(process.cwd(), '.qx.config.js'))
-  }
-  
-  if (process.env.NODE_ENV === 'development') {
-    publicPath = '//localhost:' + ${port} + '/'
-  }
-  
-  if (process.env.UMI_APP_ENV === 'prod') {
-    terserOptions = {
-      compress: {
-        pure_funcs: ['console.log', 'debugger'],
-      },
-    };
-  } else {
-    terserOptions = {
-      compress: {
-        drop_debugger: true,
-      },
-    };
-  }
-  
-  export default defineConfig({
-    esbuild: {},
-    devServer: {
-      port: ${port},
-      'Access-Control-Allow-Origin': true
-    },
-    runtimePublicPath: true,
-    publicPath,
-    mountElementId: pkg.name,
-    webpack5: {
-      lazyCompilation: {},
-    },
-    nodeModulesTransform: {
-      type: 'none',
-    },
-    history: {
-      type: 'hash',
-    },
-    alias: {
-      '@/src': 'src',
-    },
-    hash: true,
-    title: false,
-    lessLoader: {
-      globalVars: {
-        theme: 'true;@import "~@/variable.less"',
-      },
-    },
-    antd: {
-      config: {},
-    },
-    fastRefresh: {},
-    qiankun: {
-      slave: {},
-    },
-    dynamicImport: {
-      loading: '@/components/qx-page-loading',
-    },
-    routes,
-    terserOptions,
-    chainWebpack: function (memo, { env, webpack, createCSSRule }) {
-      memo.resolve.alias.set('@', path.resolve(__dirname, './src'));
-      memo.resolve.alias.set('@@', path.resolve(__dirname, './src/.umi'));
-      memo.optimization.delete('noEmitOnErrors');
-      memo.plugins.delete('optimize-css');
-      // if (env === 'production') {
-        memo.merge({
-          plugins: env === 'production'?  [new MiniCssExtractPlugin()] : [],
-          optimization: {
-            emitOnErrors: true,
-            splitChunks: {
-              chunks: 'async',
-              minSize: 30000,
-              minChunks: 3,
-              automaticNameDelimiter: '.',
-              cacheGroups: {
-                antdesigns: {
-                  name: 'antdesigns',
-                  chunks: 'all',
-                  test: /(@antd|antd|@ant-design)/,
-                  priority: 10
-                },
-                x6: {
-                  name: 'x6',
-                  chunks: 'all',
-                  test: /(@antv\\/x6|@antv\\/x6-react-components|@antv\\/x6-react-shape)/,
-                  priority: 20,
-                },
-                qxwidgets: {
-                  name: 'qxwidgets',
-                  chunks: 'all',
-                  test: /\\/src\\/packages\\/qx-form-generator/,
-                  priority: 10,
-                },
-                formrender: {
-                  name: 'formrender',
-                  chunks: 'all',
-                  test: /@qx\\/form-render/,
-                  priority: 10,
-                },
-                qx: {
-                  name: 'qx',
-                  chunks: 'all',
-                  test: /(@qx\\/view-render|@qx\\/form-design|@qx\\/hooks|@qx\\/utils|@qx\\/icon-btn)/,
-                  priority: 20,
-                },
-                echarts: {
-                  name: 'echarts',
-                  chunks: 'all',
-                  test: /(echarts|echarts-for-react)/,
-                  priority: 20,
-                },
-                // styles: {
-                //   name: "styles",
-                //   type: "css/mini-extract",
-                //   chunks: "all",
-                //   enforce: true,
-                // },
-                vendors: {
-                  name: 'vendors',
-                  chunks: 'all',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                },
-              },
-            },
-          },
-          externals: function ({ context, request }, callback) {
-            if (env === 'production') {
-              if (/^react$/.test(request)) {
-                return callback(null, 'React', 'react');
-              }
-    
-              if (/^react-dom$/.test(request)) {
-                return callback(null, 'ReactDOM', 'react-dom');
-              }
-            }
-    
-            if (/antd.*.(css|less)$/.test(path.resolve(context, request))) {
-              return callback(null, 'antd-style');
-            }
-    
-            callback();
-          },
-        });  
-      // }
-    },
-    ...userConfig,
-  });
-  `;
-};
-
-module.exports = getConfigContent;

+const { defineConfig } = require('vite');
+const process = require('process');
+import { viteExternalsPlugin } from 'vite-plugin-externals';
+const path = require('path');
+const { cwd } = require('process');
+
+module.exports = defineConfig({
+  server: {
+    proxy: path.resolve(cwd(), './proxy'),
+  },
+  define: {
+    // By default, Vite doesn't include shims for NodeJS/
+    // necessary for segment analytics lib to work
+    global: {},
+    'process.env': process.env,
+  },
+  resolve: {
+    extensions: ['.json', '.jsx', '.js', '.ts', '.tsx'],
+    alias: {
+      '@': path.resolve(cwd, './src/'),
+      '@/src': path.resolve(cwd, './src/'),
+      '~@qx': path.resolve(cwd, './node_modules/@qx'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        additionalData: `@import '@/styles/variable.less';`,
+      },
+    },
+  },
+  plugins: [
+    new viteExternalsPlugin({
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      dayjs: 'dayjs',
+      antd: 'antd',
+    }),
+  ],
+});

+const CopyPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WebpackBar = require('webpackbar');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+
+const process = require('process');
+const path = require('path');
+
+const cwd = process.cwd();
+
+module.exports = {
+  output: {
+    filename: './js/[name]-[contenthash].js',
+    libraryTarget: 'umd',
+    clean: true,
+  },
+  entry: path.resolve(cwd, './src/index.tsx'),
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: [
+          'thread-loader',
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                '@babel/preset-react',
+                '@babel/preset-typescript',
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpeg|jpg)(\?[a-z0-9=&.]+)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: './public/imgs/[name].[ext]',
+          },
+        },
+      },
+      {
+        test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: './public/fonts/[name].[ext]',
+          },
+        },
+      },
+      {
+        test: /\.less$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              additionalData: `@import '@/styles/variable.less';`,
+            },
+          },
+        ],
+      },
+
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack', 'url-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.json', '.jsx', '.js', '.ts', '.tsx'],
+    alias: {
+      '@': path.resolve(cwd, './src/'),
+      '@/src': path.resolve(cwd, './src/'),
+    },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(cwd, './src/public/index.html'),
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(cwd, './static'),
+          to: 'static',
+        },
+      ],
+    }),
+    new WebpackBar(),
+    new NodePolyfillPlugin()
+  ],
+};

+const { merge } = require('webpack-merge');
+const baseConfig = require('./webpack.base');
+const path = require('path');
+const { cwd } = require('process');
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  devServer: {
+    hot: false,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    proxy: path.resolve(cwd(), './proxy'),
+  },
+  externals: {},
+});

+const { merge } = require('webpack-merge');
+const baseConfig = require('./webpack.base');
+const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    'dayjs': 'dayjs',
+    'antd': 'antd',
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CompressionWebpackPlugin(),
+      new TerserPlugin({
+        extractComments: false,
+        test: /\.js(\?.*)?$/i,
+        exclude: /node_modules/,
+      }),
+      new MiniCssExtractPlugin({
+        filename: './styles/[name]-[contenthash].css',
+      }),
+      new CssMinimizerWebpackPlugin(),
+    ],
+  },
+});