From 67a168b0363817190d72a389f5aa5c40c86085f1 Mon Sep 17 00:00:00 2001
From: Diablohu <Diablohu@users.noreply.github.com>
Date: Fri, 20 Aug 2021 11:44:01 +0800
Subject: [PATCH] deps(webpack): update for WDS 4

---
 CHANGELOG.md                                 |  5 +-
 packages/koot-webpack/build.js               |  2 +-
 packages/koot-webpack/building/client-dev.js | 62 +++++++++++++-------
 packages/koot-webpack/package.json           |  6 +-
 packages/koot/package.json                   |  4 +-
 test/projects/simple/package.json            |  8 +--
 test/projects/simple2/package.json           |  8 +--
 test/projects/standard/package.json          |  8 +--
 test/projects/standard/src/critical.g.less   |  6 +-
 9 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67e76d362..ce5c61fb0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,6 +63,7 @@
     -   移除 _CSS_ 处理时的 `universal-alias-loader` 逻辑
         -   新版 _Webpack_ 已默认支持 `css-loader` 使用 `resolve.alias` 配置,该 _Loader_ 不再需要
     -   更新依赖包 **major** 版本号
+        -   `@pmmmwh/react-refresh-webpack-plugin` -> _^0.5.0-rc.4_
         -   `compression-webpack-plugin` -> _^8.0.1_
         -   `copy-webpack-plugin` -> _^9.0.1_
         -   `css-loader` -> _^6.2.0_
@@ -74,7 +75,7 @@
         -   `sass-loader` -> _^12.1.0_
         -   `style-loader` -> _^3.2.1_
         -   `thread-loader` -> _^3.0.4_
-        -   `webpack` -> _^5.48.0_ ([#215](https://github.com/cmux/koot/issues/215))
+        -   `webpack` -> _^5.51.1_ ([#215](https://github.com/cmux/koot/issues/215))
         -   `webpack-bundle-analyzer` -> _^4.4.2_
         -   `webpack-dev-middleware` -> _^5.0.0_
         -   `webpack-dev-server` -> _^4.0.0_ ([官方升级指南](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md))
@@ -1885,7 +1886,7 @@ _Koot.js_ 0.14 开始原生支持 _Electron_ 项目开发。利用 `koot-cli` 
 **2018-09-14**
 
 -   **ReactApp** (React 同构)
-    -   当多语言(i18n)启用时,在 `<head>` 中自动生成跳转到相应的其他语种的链接的 `pageinfo`ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps<link>` 标签
+    -   当多语言(i18n)启用时,在 `<head>` 中自动生成跳转到相应的其他语种的链接的 `pageinfo`ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps`pageinfo`` ImportStyle`Reacthttps`pageinfo ``ImportStyle`Reacthttps<link>` 标签
 -   内部代码
     -   `hl` 修改为全局常量
 
diff --git a/packages/koot-webpack/build.js b/packages/koot-webpack/build.js
index e66db5ece..a3cb56c01 100644
--- a/packages/koot-webpack/build.js
+++ b/packages/koot-webpack/build.js
@@ -531,7 +531,7 @@ module.exports = async (kootConfig = {}) => {
         if (
             semver.satisfies(
                 semver.coerce(getModuleVersion('webpack-dev-server')),
-                '>= 5'
+                '>= 4'
             )
         ) {
             return await buildClientDev(buildParams);
diff --git a/packages/koot-webpack/building/client-dev.js b/packages/koot-webpack/building/client-dev.js
index 3ef7e1ade..be43971ff 100644
--- a/packages/koot-webpack/building/client-dev.js
+++ b/packages/koot-webpack/building/client-dev.js
@@ -9,7 +9,8 @@ const WebpackDevServer = require('webpack-dev-server');
 const {
     keyConfigWebpackSPATemplateInject,
 } = require('koot/defaults/before-build');
-const getDistPath = require('koot/utils/get-dist-path');
+const getCwd = require('koot/utils/get-cwd');
+// const getDistPath = require('koot/utils/get-dist-path');
 
 const buildClient = require('../build-client');
 
@@ -42,6 +43,36 @@ async function buildClientDev({
 
     const configsSPATemplateInject = [];
     const configsClientDev = [];
+    const watchFiles = [
+        'template',
+        'i18n',
+        'routes',
+        'store',
+        // 'staticCopyFrom',
+    ].reduce((list, key) => {
+        const value = appConfig[key];
+        if (typeof value === 'undefined') return list;
+
+        switch (key) {
+            case 'i18n': {
+                // console.log(key, value);
+                if (Array.isArray(value?.locales)) {
+                    for (const [, , file] of value.locales) {
+                        list.push(file);
+                    }
+                }
+                break;
+            }
+            // case 'staticCopyFrom': {
+            //     break;
+            // }
+            default: {
+                list.push(path.resolve(getCwd(), value));
+            }
+        }
+
+        return list;
+    }, []);
 
     if (Array.isArray(webpackConfig)) {
         webpackConfig.forEach((config) => {
@@ -75,15 +106,16 @@ async function buildClientDev({
         headers: optionHeaders = {},
         devMiddleware: optionDevMiddleware = {},
         client: optionClient = {},
-        static: optionStatic = {},
-        watchOptions: optionWatch,
+        watchFiles: optionWatchFiles,
 
         publicPath: v3_publicPath,
         stats: v3_stats,
-        watch: v3_watch,
         clientLogLevel: v3_clientLogLevel,
         quiet: v3_quiet,
-        contentBase: v3_contentBase,
+
+        watch: IGNORED_v3_watch,
+        watchOptions: IGNORED_v3_watchOptions,
+        contentBase: IGNORED_v3_contentBase,
 
         // port,
         ...extendDevServerOptions
@@ -137,21 +169,11 @@ async function buildClientDev({
             ...optionClient,
         },
 
-        static: {
-            directory: v3_contentBase ?? './',
-            // watch: true,
-            watch: optionWatch ??
-                v3_watch ?? {
-                    // aggregateTimeout: 20 * 1000,
-                    ignored: [
-                        // /node_modules/,
-                        // 'node_modules',
-                        getDistPath(),
-                        path.resolve(getDistPath(), '**/*'),
-                    ].map((v) => v.replace(/\\/g, '/')),
-                },
-            ...optionStatic,
-        },
+        watchFiles: Array.isArray(optionWatchFiles)
+            ? [...watchFiles, ...optionWatchFiles]
+            : typeof optionWatchFiles === 'object'
+            ? { ...optionWatchFiles }
+            : [...watchFiles],
 
         onBeforeSetupMiddleware: (devServer) => {
             if (appType === 'ReactSPA' || appType === 'ReactElectronSPA') {
diff --git a/packages/koot-webpack/package.json b/packages/koot-webpack/package.json
index cf9eba868..39c7fb48b 100644
--- a/packages/koot-webpack/package.json
+++ b/packages/koot-webpack/package.json
@@ -40,7 +40,7 @@
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.15.0",
         "@babel/register": "^7.15.3",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.4",
         "@types/webpack": "^5.28.0",
         "babel-loader": "^8.2.2",
         "cache-loader": "^4.1.0",
@@ -61,11 +61,11 @@
         "style-loader": "^3.2.1",
         "thread-loader": "^3.0.4",
         "universal-alias-loader": "^1.2.2",
-        "webpack": "^5.50.0",
+        "webpack": "^5.51.1",
         "webpack-bundle-analyzer": "^4.4.2",
         "webpack-config": "^7.5.0",
         "webpack-dev-middleware": "^5.0.0",
-        "webpack-dev-server": "^3.11.2",
+        "webpack-dev-server": "^4.0.0",
         "webpack-hot-middleware": "^2.25.0",
         "workbox-webpack-plugin": "^6.2.4"
     },
diff --git a/packages/koot/package.json b/packages/koot/package.json
index 013c46eac..d71454d02 100644
--- a/packages/koot/package.json
+++ b/packages/koot/package.json
@@ -49,7 +49,7 @@
         "@types/inquirer": "^7.3.3",
         "@types/lodash": "^4.14.172",
         "@types/node": "^16.6.2",
-        "@types/react": "^17.0.18",
+        "@types/react": "^17.0.19",
         "@types/react-dom": "^17.0.9",
         "@types/react-redux": "^7.1.18",
         "@types/react-router": "npm:@types/react-router@^3.0.25",
@@ -91,7 +91,7 @@
         "open": "^8.2.1",
         "ora": "^5.4.1",
         "os-locale": "^5.0.0",
-        "pm2": "^5.1.0",
+        "pm2": "^5.1.1",
         "portfinder": "^1.0.28",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
diff --git a/test/projects/simple/package.json b/test/projects/simple/package.json
index 6e9496590..01f2c9fc8 100644
--- a/test/projects/simple/package.json
+++ b/test/projects/simple/package.json
@@ -73,7 +73,7 @@
         "@types/inquirer": "^7.3.3",
         "@types/lodash": "^4.14.172",
         "@types/node": "^16.6.2",
-        "@types/react": "^17.0.18",
+        "@types/react": "^17.0.19",
         "@types/react-dom": "^17.0.9",
         "@types/react-redux": "^7.1.18",
         "@types/react-router": "npm:@types/react-router@^3.0.25",
@@ -114,7 +114,7 @@
         "open": "^8.2.1",
         "ora": "^5.4.1",
         "os-locale": "^5.0.0",
-        "pm2": "^5.1.0",
+        "pm2": "^5.1.1",
         "portfinder": "^1.0.28",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -149,7 +149,7 @@
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.15.0",
         "@babel/register": "^7.15.3",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.4",
         "@types/webpack": "^5.28.0",
         "babel-loader": "^8.2.2",
         "cache-loader": "^4.1.0",
@@ -170,7 +170,7 @@
         "style-loader": "^3.2.1",
         "thread-loader": "^3.0.4",
         "universal-alias-loader": "^1.2.2",
-        "webpack": "^5.50.0",
+        "webpack": "^5.51.1",
         "webpack-bundle-analyzer": "^4.4.2",
         "webpack-config": "^7.5.0",
         "webpack-dev-middleware": "^5.0.0",
diff --git a/test/projects/simple2/package.json b/test/projects/simple2/package.json
index 34116e17e..fb1981535 100644
--- a/test/projects/simple2/package.json
+++ b/test/projects/simple2/package.json
@@ -72,7 +72,7 @@
         "@types/inquirer": "^7.3.3",
         "@types/lodash": "^4.14.172",
         "@types/node": "^16.6.2",
-        "@types/react": "^17.0.18",
+        "@types/react": "^17.0.19",
         "@types/react-dom": "^17.0.9",
         "@types/react-redux": "^7.1.18",
         "@types/react-router": "npm:@types/react-router@^3.0.25",
@@ -113,7 +113,7 @@
         "open": "^8.2.1",
         "ora": "^5.4.1",
         "os-locale": "^5.0.0",
-        "pm2": "^5.1.0",
+        "pm2": "^5.1.1",
         "portfinder": "^1.0.28",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -148,7 +148,7 @@
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.15.0",
         "@babel/register": "^7.15.3",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.4",
         "@types/webpack": "^5.28.0",
         "babel-loader": "^8.2.2",
         "cache-loader": "^4.1.0",
@@ -169,7 +169,7 @@
         "style-loader": "^3.2.1",
         "thread-loader": "^3.0.4",
         "universal-alias-loader": "^1.2.2",
-        "webpack": "^5.50.0",
+        "webpack": "^5.51.1",
         "webpack-bundle-analyzer": "^4.4.2",
         "webpack-config": "^7.5.0",
         "webpack-dev-middleware": "^5.0.0",
diff --git a/test/projects/standard/package.json b/test/projects/standard/package.json
index 18c64ee33..9230ce15d 100644
--- a/test/projects/standard/package.json
+++ b/test/projects/standard/package.json
@@ -91,7 +91,7 @@
         "@types/inquirer": "^7.3.3",
         "@types/lodash": "^4.14.172",
         "@types/node": "^16.6.2",
-        "@types/react": "^17.0.18",
+        "@types/react": "^17.0.19",
         "@types/react-dom": "^17.0.9",
         "@types/react-redux": "^7.1.18",
         "@types/react-router": "npm:@types/react-router@^3.0.25",
@@ -132,7 +132,7 @@
         "open": "^8.2.1",
         "ora": "^5.4.1",
         "os-locale": "^5.0.0",
-        "pm2": "^5.1.0",
+        "pm2": "^5.1.1",
         "portfinder": "^1.0.28",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -167,7 +167,7 @@
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.15.0",
         "@babel/register": "^7.15.3",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.4",
         "@types/webpack": "^5.28.0",
         "babel-loader": "^8.2.2",
         "cache-loader": "^4.1.0",
@@ -188,7 +188,7 @@
         "style-loader": "^3.2.1",
         "thread-loader": "^3.0.4",
         "universal-alias-loader": "^1.2.2",
-        "webpack": "^5.50.0",
+        "webpack": "^5.51.1",
         "webpack-bundle-analyzer": "^4.4.2",
         "webpack-config": "^7.5.0",
         "webpack-dev-middleware": "^5.0.0",
diff --git a/test/projects/standard/src/critical.g.less b/test/projects/standard/src/critical.g.less
index 95d3578a1..05c07aadf 100644
--- a/test/projects/standard/src/critical.g.less
+++ b/test/projects/standard/src/critical.g.less
@@ -9,8 +9,8 @@
     transition-property: background-color, background-size, background-position,
         border-color, box-shadow,
         // color,
-            // fill,
-            opacity,
+        // fill,
+        opacity,
         outline, transform, filter;
 }
 
@@ -100,7 +100,7 @@ a,
     transition-property: background-color, background-size, background-position,
         border-color, box-shadow, color,
         // fill,
-            opacity,
+        opacity,
         outline, transform, filter;
     .hover({color: @color-link-hover;}; {color: @color-link-active;});