deps(webpack): update for WDS 4

cmux · Aug 20, 2021 · 67a168b · 67a168b
1 parent e071397
commit 67a168b
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;});
-Original file line number
+Diff line change
@@ Expand Up / @@ -531,7 +531,7 @@ module.exports = async (kootConfig = {}) => { @@
             if (
                 semver.satisfies(
                     semver.coerce(getModuleVersion('webpack-dev-server')),
-                    '>= 5'
+                    '>= 4'
                 )
             ) {
                 return await buildClientDev(buildParams);
@@ Expand Down @@