feat: webpack-dev 升级到5.x,提升 dev 性能,优化日志输出

Author: winixt

docs/guide/upgrade3.md

@@ -2,23 +2,24 @@
 
 ## 版本 3.x 的 break
 
-1. 编译时的 [base](../reference/config/index.md/#base) 配置，移到了 [router.base](../reference/config/index.md/#router) 下。
-2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v4.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)。
-3. [layout 插件](../reference/plugin/plugins/layout.md#_4-x-升级到-5-x) 有一些属性变更
-3. [request 插件](../reference/plugin/plugins/request.md#_2-x-升级到-3-x) 有一些参数变更，升级请使用最新版本
+1. 环境要求 `node >= v18.12.0`
+2. 编译时的 [base](../reference/config/index.md/#base) 配置，移到了 [router.base](../reference/config/index.md/#router) 下
+3. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v5.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)、[webpack-dev-server 4.x 升级 5.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md)
+4. [layout 插件](../reference/plugin/plugins/layout.md#_4-x-升级到-5-x) 有一些属性变更
+5. [request 插件](../reference/plugin/plugins/request.md#_2-x-升级到-3-x) 有一些参数变更，升级请使用最新版本
 
 ## 继续使用 Webpack
 
-1. 添加 Webpack 构建依赖包： `npm i @fesjs/builder-webpack -D`。
+1. 添加 Webpack 构建依赖包： `npm i @fesjs/builder-webpack -D`
 2. `dev` 的 `publicPath` 配置不能为 `./`，请更改为 `auto`
-3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
+3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)
 
 ## 换成 Vite
 
-1. 安装依赖包 `npm i @fesjs/builder-vite`。
-2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config/index.md)。
-3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
-4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。
+1. 安装依赖包 `npm i @fesjs/builder-vite`
+2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config/index.md)
+3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法
+4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式
 
 ## 插件
 

packages/fes-builder-webpack/package.json

@@ -66,7 +66,7 @@
         "webpack": "^5.90.3",
         "webpack-5-chain": "^8.0.1",
         "webpack-bundle-analyzer": "^4.4.0",
-        "webpack-dev-server": "^4.15.1",
-        "webpackbar": "^5.0.2"
+        "webpack-dev-server": "^5.1.0",
+        "webpackbar": "^7.0.0"
     }
 }

packages/fes-builder-webpack/src/plugins/commands/dev/connectHistoryMiddleware.js

@@ -1,19 +1,21 @@
-import { extname } from 'path';
+import { extname } from 'node:path';
 import historyFallback from 'connect-history-api-fallback';
 
 const ASSET_EXT_NAMES = ['.ico', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
 
-const proxyMiddleware = (api) => (req, res, next) => {
-    const proxyConfig = api.config.proxy;
-    if (proxyConfig && Object.keys(proxyConfig).some((path) => req.url.startsWith(path))) {
-        return next();
-    }
-    if (ASSET_EXT_NAMES.includes(extname(req.url))) {
-        return next();
-    }
+function proxyMiddleware(api) {
+    return (req, res, next) => {
+        const proxyConfig = api.config.proxy;
+        if (proxyConfig && Object.keys(proxyConfig).some(path => req.url.startsWith(path))) {
+            return next();
+        }
+        if (ASSET_EXT_NAMES.includes(extname(req.url))) {
+            return next();
+        }
 
-    const history = historyFallback();
-    history(req, res, next);
-};
+        const history = historyFallback();
+        history(req, res, next);
+    };
+}
 
 export default proxyMiddleware;

packages/fes-builder-webpack/src/plugins/commands/dev/devServer.js

@@ -2,6 +2,23 @@ import { chalk } from '@fesjs/utils';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 
+function formatProxy(proxy) {
+    if (!proxy) {
+        return [];
+    }
+
+    if (Array.isArray(proxy)) {
+        return proxy;
+    }
+
+    return Object.keys(proxy).map((apiPath) => {
+        return {
+            context: [apiPath],
+            ...proxy[apiPath],
+        };
+    });
+}
+
 export function startDevServer({ webpackConfig, host, port, proxy, https, beforeMiddlewares, afterMiddlewares, customerDevServerConfig }) {
     const options = {
         hot: true,
@@ -10,6 +27,7 @@ export function startDevServer({ webpackConfig, host, port, proxy, https, before
         client: {
             logging: 'error',
             overlay: false,
+            progress: true,
             webSocketURL: {
                 hostname: host,
                 port,
@@ -27,7 +45,7 @@ export function startDevServer({ webpackConfig, host, port, proxy, https, before
         ...(customerDevServerConfig || {}),
         port,
         host,
-        proxy,
+        proxy: formatProxy(proxy),
     };
     const compiler = webpack(webpackConfig);
     const server = new WebpackDevServer(options, compiler);

packages/fes-builder-webpack/src/plugins/commands/dev/index.js

@@ -1,5 +1,6 @@
-import path from 'path';
-import fs from 'fs';
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
 import { cleanTmpPathExceptCache, getBundleAndConfigs } from '../../common/buildDevUtils';
 import connectHistoryMiddleware from './connectHistoryMiddleware';
 

packages/fes-builder-webpack/src/plugins/common/webpackConfig/index.js

@@ -1,13 +1,13 @@
-import { join } from 'node:path';
 import { existsSync } from 'node:fs';
-import Config from 'webpack-5-chain';
+import { join } from 'node:path';
 import webpack from 'webpack';
+import Config from 'webpack-5-chain';
 import createCssWebpackConfig from './css';
-import getBabelOpts from './getBabelOpts';
-import createVueWebpackConfig from './vue';
 import createDefineWebpackConfig from './define';
-import createMinimizerWebpackConfig from './minimizer';
+import getBabelOpts from './getBabelOpts';
 import createHtmlWebpackConfig from './html';
+import createMinimizerWebpackConfig from './minimizer';
+import createVueWebpackConfig from './vue';
 
 const DEFAULT_EXCLUDE_NODE_MODULES = [
     'vue',
@@ -124,12 +124,14 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
     webpackConfig.module
         .rule('esm')
         .test(/\.m?jsx?$/)
-        .resolve.set('fullySpecified', false);
+        .resolve
+        .set('fullySpecified', false);
 
     webpackConfig.module
         .rule('js')
         .test(/\.(js|mjs|jsx|ts|tsx)$/)
-        .exclude.add((filepath) => {
+        .exclude
+        .add((filepath) => {
             // always transpile js in vue files
             if (/(\.vue|\.jsx)$/.test(filepath)) { return false; }
 
@@ -147,9 +149,11 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         webpackConfig.module
             .rule('js-in-node_modules')
             .test(/\.(js|mjs)$/)
-            .include.add(/node_modules/)
+            .include
+            .add(/node_modules/)
             .end()
-            .exclude.add((filepath) => {
+            .exclude
+            .add((filepath) => {
                 if (transpileDepRegex && transpileDepRegex.test(filepath)) { return true; }
 
                 return false;