break: 升级 webpack-dev-server: 3.x > 4.x

docs/zh/guide/getting-started.md

@@ -1,13 +1,17 @@
 # 快速上手
 
 ## 依赖环境
-首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。
+
+首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。
+
 ```bash
 # 打印 node 版本
 node -v
-v10.13.0
+v12.13.0
 ```
+
 推荐使用 yarn 管理 npm 依赖
+
 ```bash
 # 全局安装 yarn
 npm i yarn -g
@@ -17,21 +21,26 @@ npm i yarn -g
 
 这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
 
-##### 步骤1 创建工作空间     
+##### 步骤 1 创建工作空间
+
 如果工作空间不存在，则先创建：
+
 ```bash
 # 创建目录 workspace
 mkdir workspace
 # 进入目录 workspace
 cd workspace
 ```
+
 如果工作空间已存在，则直接进入
+
 ```bash
 # 进入目录 workspace
 cd workspace
 ```
 
-##### 步骤2 在工作空间创建项目
+##### 步骤 2 在工作空间创建项目
+
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -52,22 +61,22 @@ npx @fesjs/create-fes-app myapp
   </CodeGroupItem>
 </CodeGroup>
 
-
 如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在：
 
 <img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
 
 你可以选择：
-- `Overwrite` 删除项目文件夹，重新创建项目。
-- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。      
+
+-   `Overwrite` 删除项目文件夹，重新创建项目。
+-   `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
 
 当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`：
 <img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
 
-你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。      
+你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
 
+##### 步骤 3 安装依赖
 
-##### 步骤3 安装依赖
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -75,7 +84,7 @@ npx @fesjs/create-fes-app myapp
 # 进入项目目录
 cd myapp
 # 安装依赖
-yarn 
+yarn
 ```
 
   </CodeGroupItem>
@@ -86,13 +95,14 @@ yarn
 # 进入项目目录
 cd myapp
 # 安装依赖
-npm i 
+npm i
 ```
 
   </CodeGroupItem>
 </CodeGroup>
 
-##  启动项目
+## 启动项目
+
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -130,15 +140,14 @@ Starting the development server http://localhost:8080 ...
   </CodeGroupItem>
 </CodeGroup>
 
-
 Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
 
-
 <img :src="$withBase('home.png')" alt="home">
 
 ## 部署发布
 
 ### 构建
+
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -173,6 +182,7 @@ npm run build
 </CodeGroup>
 
 构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。
+
 ```base
 tree ./dist
 
@@ -188,8 +198,9 @@ dist
 ```
 
 ### 本地验证
+
 发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。
 
-
 ### 部署
-本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。
+
+本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

docs/zh/guide/upgrade2.1.md

@@ -2,11 +2,8 @@
 
 ## 版本 2.1.x 的 break
 
-1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#router) 下
-
-## 相关插件
-
-由于需要兼容 Vite 的写法，插件也做了相关代码调整，
+1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#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)。
 
 ## 不变更构建方式
 

packages/fes-build-webpack/package.json

@@ -59,11 +59,10 @@
     "style-loader": "^2.0.0",
     "url-loader": "^4.1.1",
     "vue-loader": "^16.1.2",
-    "webpack": "^5.24.2",
+    "webpack": "^5.69.0",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-chain": "^6.5.1",
-    "webpack-dev-server": "^3.11.2",
-    "webpackbar": "^5.0.0-3"
+    "webpack-dev-server": "^4.8.1"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.0.5",

packages/fes-build-webpack/src/plugins/commands/dev/cert/cert.pem

@@ -1,25 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIETDCCArSgAwIBAgIQKxt9OXlPUkkQASISMtxezDANBgkqhkiG9w0BAQsFADBh
-MR4wHAYDVQQKExVta2NlcnQgZGV2ZWxvcG1lbnQgQ0ExGzAZBgNVBAsMEmpjbEB5
-Y2pjbDg2OC5sb2NhbDEiMCAGA1UEAwwZbWtjZXJ0IGpjbEB5Y2pjbDg2OC5sb2Nh
-bDAeFw0xOTA2MDEwMDAwMDBaFw0zMDA2MDEwOTMzNTdaMEkxJzAlBgNVBAoTHm1r
-Y2VydCBkZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTEeMBwGA1UECwwVamNsQHVtaWpz
-LmxvY2FsICh1bWkpMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvKA/
-Oz9az6kEZ5zSZyufpYXt5gOAnE/f8VY2hP3g7JDRCMk6w0XgkmGDJ45nY9fVVhCy
-oqg8bIkLcLbvp69/I5O8ae0TbyS95mgBflhgsqjSkydhn7bZmAe5OdZv+JtGBjd2
-2YDpzseK0z1VkXxgEAKYOsxszaCj6aktAhTQvER2DYGo0XaM62SOQNL4qLn97Zrg
-+g8GSjS/Cg/vb+k42tCghOm0Ks26CDBl92Dwl5modEkfzewrjC2WNletiZupsX6p
-rnRDBcGYHl+S/+D/iHCSu83IkxoorsIigGlSah/nVfetsKHBTXFXnSxL86T9MA1R
-5ZcXoVv1cWZNiiMMawIDAQABo4GXMIGUMA4GA1UdDwEB/wQEAwIFoDATBgNVHSUE
-DDAKBggrBgEFBQcDATAMBgNVHRMBAf8EAjAAMB8GA1UdIwQYMBaAFFRTg3QdwqVq
-CLRjdLfglrJZqTrzMD4GA1UdEQQ3MDWCCWxvY2FsaG9zdIIQbG9jYWwuYWxpcGF5
-Lm5ldIcEfwAAAYcQAAAAAAAAAAAAAAAAAAAAATANBgkqhkiG9w0BAQsFAAOCAYEA
-lFgca57CNAoaq8MC6bTZo10FC/LDTnUh/p20w5uCp8iSKGtVM+HvulrWXwUGRkUl
-jnukYeMwl4tONzwHeUV1oVT8DATFLAFIHE4ikGDM7V+Ximxv5yQQ9hD8fzeOWdYO
-SKA5eDjd+ut+HiSfItqgM+8t1RxPxsYlGeOMp65cKt1NaIdRxQHwESGba6H0sez7
-p5Eu95pXp/BUy7lnvqudXgfTAUpSzxpSG+49hzMKuN/CAZyFNp52qDDHpRtuxHns
-q0pjGHBOC2aYc1eXNgn2g0wMDp3+BYh9yjoWNkMKqY7hpcB9PY5zw0u8R0wG8z+n
-d915bZT3FKjx5sxmDmVaDNdARwi9ExqFvIs+hje1IUrszR7pnT7EUcUOhWNbKKkf
-jRH3sy+TyA+TsYm1AAcnnY/Ne/Ce4OcMGcYwjb1L/gu/PWoup4f/GIziEw8cbPti
-1+Exm+AOSjcSspPPfQmpHqupNaDJSjo6xYX3wn3oIb34WvH8INL3liiVedn+LTy4
------END CERTIFICATE-----

packages/fes-build-webpack/src/plugins/commands/dev/cert/key.pem

@@ -1,28 +0,0 @@
------BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC8oD87P1rPqQRn
-nNJnK5+lhe3mA4CcT9/xVjaE/eDskNEIyTrDReCSYYMnjmdj19VWELKiqDxsiQtw
-tu+nr38jk7xp7RNvJL3maAF+WGCyqNKTJ2GfttmYB7k51m/4m0YGN3bZgOnOx4rT
-PVWRfGAQApg6zGzNoKPpqS0CFNC8RHYNgajRdozrZI5A0viouf3tmuD6DwZKNL8K
-D+9v6Tja0KCE6bQqzboIMGX3YPCXmah0SR/N7CuMLZY2V62Jm6mxfqmudEMFwZge
-X5L/4P+IcJK7zciTGiiuwiKAaVJqH+dV962wocFNcVedLEvzpP0wDVHllxehW/Vx
-Zk2KIwxrAgMBAAECggEAUdiitz2dVN/85kyYy2WVZ0g+2wCIDMtn25tSGtDiiSOp
-YEuYsOSgNkQTmdVjrWIY0rh6GrQvS9UHXsgyIyu2WiSfq8LQHPjvYYudokoM41j3
-zhxXcurvbdVkHOGcQl51uvrUGjqiuTPCXDiP6YnzUN8fWNwdFfhvR1M+EVog3J+F
-RpSavm+SCOkyqCBWgQDb/p59kvlISJuDXKr3tV5HaKVKYfDBQLvuiZBweDwXjxop
-z2Srs2GEmJPuKXU32deqNg7KgPvd6ADxb+GXhrGVBaj7dxi77E8nHL/aGutVE4ON
-VqMwdWoRPkEPU33rF+CCxHqHJFcNS+62ozzeUYGlaQKBgQDR2mPnjthIgMkX+cw5
-ROSadd5gZtQFXAzjAv685k+Xqm2IGk2Z2d5VydHO7cKwVLTB6cEJ+CbLZ1kIS6yV
-GxBHaZ+LQxGkt4QD9IBSnL9Cxe7uvo+bpvV3eXbANG0tNl482RctS/u+g+OGSu05
-6KIIlYag5hcMjr7ozuhv8LVytwKBgQDmGuIKFHXXqeRJNW+QvJfwQFKNQViqASlY
-W4Y5guS6s85inJ3bRKwYtZsczne2uwYqQHlPw8X4TQMXApM+04mJtqwrYDpcX6Ad
-VYPmo+J/k917QwlN8VP4AzlDdz8PU+zenmWgpKaG8GMtYia9qCIbWY/+hwwBk0sG
-FNpguWnv7QKBgFSGT2ksSwdhAB5tGgoTKrTgNvLDWDDUc8hYI3y4k2R2W+nPFmSa
-sYgCY0Si1aEqbSgR3BQE5LNW7DCAMoJYRUVOUNnJ6Ohclor1R15/DjZ5/RQioztB
-k2tM/DzMoRDt7iU6F7DCAyMoglNMCKMjhWhJudFC/BOtx02EUXENFjifAoGAD966
-yEcw+XbWL9Zno2vebsuA5g0juFXsLBPj5gOJEvdjvJlgqcbKt8mOsSXsS8YKXs+j
-jkTKWp21INkknqioS781kKhKXiSaPmuvdTDIZlQkamPtOFr0l55hTK3kw4HeTFxQ
-VgwFEDl0HaUvVtVJxOkgbUWTJmiqO/kkNpeTHuECgYEAtD4dRK3w65d9BWHqgeOV
-IVSDeYjA6gNuC3tuGzk9bA70U0X/T8+EQMuKNvRZC61/JzAlzEH1oGIw8md8Ki86
-aRT96Gce7Q0FA3SaQ+h+w+kgsJG/aly3IThaJh/mx6HN7Xry6BFO1vlYlgdlm/1G
-iKX/ppCt7bJYqfrptWs42u4=
------END PRIVATE KEY-----

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

@@ -1,46 +1,42 @@
 import WebpackDevServer from 'webpack-dev-server';
 import webpack from 'webpack';
-import fs from 'fs';
-import path from 'path';
 
 export function startDevServer({ webpackConfig, host, port, proxy, https, beforeMiddlewares, afterMiddlewares, customerDevServerConfig }) {
     const options = {
-        contentBase: webpackConfig.output.path,
         hot: true,
+        port,
         host,
-        sockHost: host,
-        sockPort: port,
         proxy,
-        compress: true,
-        noInfo: true,
-        disableHostCheck: true,
-        clientLogLevel: 'silent',
-        stats: 'errors-only',
-        before: (app) => {
-            beforeMiddlewares.forEach((middleware) => {
-                app.use(middleware);
-            });
+        allowedHosts: 'all',
+        static: {
+            // contentBase: webpackConfig.output.path,
         },
-        after: (app) => {
-            afterMiddlewares.forEach((middleware) => {
-                app.use(middleware);
-            });
+        server: https ? 'https' : 'http',
+        client: {
+            logging: 'error',
+            webSocketURL: {
+                hostname: host,
+                port,
+            },
+        },
+        devMiddleware: {
+            stats: 'errors-only',
+        },
+        setupMiddlewares(middlewares) {
+            middlewares.unshift(...beforeMiddlewares);
+            middlewares.push(...afterMiddlewares);
+
+            return middlewares;
         },
         headers: {
             'access-control-allow-origin': '*',
         },
         ...(customerDevServerConfig || {}),
     };
-    if (https) {
-        options.https = true;
-        options.key = fs.readFileSync(path.resolve(__dirname, './cert/key.pem'));
-        options.cert = fs.readFileSync(path.resolve(__dirname, './cert/cert.pem'));
-    }
-    WebpackDevServer.addDevServerEntrypoints(webpackConfig, options);
     const compiler = webpack(webpackConfig);
-    const server = new WebpackDevServer(compiler, options);
+    const server = new WebpackDevServer(options, compiler);
 
-    server.listen(port, host, (err) => {
+    server.startCallback((err) => {
         if (err) {
             console.error(err);
         }

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

@@ -9,11 +9,11 @@ export default (api) => {
     let hostname;
     let server;
 
-    function destroy() {
+    async function destroy() {
         for (const unwatch of unwatchs) {
             unwatch();
         }
-        server?.close();
+        await server?.stop();
     }
 
     api.registerCommand({
@@ -39,9 +39,7 @@ export default (api) => {
             hostname = getHostName(api.config.devServer?.host);
 
             // enable https
-            const isHTTPS = process.env.HTTPS || args.https;
-
-            console.log(chalk.cyan(`Starting the development server ${isHTTPS ? 'https' : 'http'}://${hostname}:${port} ...`));
+            const isHTTPS = process.env.HTTPS || args.https || api.config.devServer?.https;
 
             cleanTmpPathExceptCache({
                 absTmpPath: paths.absTmpPath,

packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js

@@ -278,9 +278,6 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         webpackConfig,
     });
 
-    // --------------- 构建输出 ----------
-    webpackConfig.plugin('progress').use(require.resolve('webpackbar'));
-
     // --------------- chainwebpack -----------
     if (chainWebpack) {
         await chainWebpack(webpackConfig, {

packages/fes-template-h5/.fes.js

@@ -35,17 +35,6 @@ export default defineBuildConfig({
     ],
     devServer: {
         port: 8000
-    },
-    windicss: {
-        config: {
-            theme: {
-                extend: {
-                    colors: {
-                        green: '#7cb305'
-                    }
-                }
-            }
-        }
-    },
+    }
 });
 

packages/fes-template-h5/package.json

@@ -47,7 +47,6 @@
     "@fesjs/fes": "^2.0.0",
     "@fesjs/plugin-icon": "^2.0.0",
     "@fesjs/plugin-request": "^2.0.0",
-    "@fesjs/plugin-windicss": "^2.0.8",
     "@fesjs/build-webpack": "^1.0.0",
     "vue": "^3.2.2"
   },

packages/fes-template-h5/src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="onepiece m-10px text-green">
+    <div class="onepiece m-10px text-yellow-700">
         fes h5 & 拉夫德鲁<br />
         <fes-icon :spin="true" class="one-icon" type="smile" @click="clickIcon" />
         <HelloWorld />
@@ -24,7 +24,7 @@ export default {
         const fes = ref('fes upgrade to vue3');
         const rotate = ref(90);
         const clickIcon = () => {
-            console.log('click Icon');
+            console.log('click icon');
         };
         console.log(process.env.NODE_ENV, process.env.HELLO);
         console.log(useRoute());