From 84c8cd95d834f3f5f3a00933d36b3668ce236117 Mon Sep 17 00:00:00 2001 From: sabertazimi Date: Thu, 19 Aug 2021 16:21:45 +0800 Subject: [PATCH] feat(CRA-start): bump webpack-dev-server to 4.0.0 --- package-lock.json | 64 +++++++++++-------- .../config/webpackDevServer.config.js | 12 ++-- packages/react-scripts/package.json | 2 +- packages/react-scripts/scripts/start.js | 16 ++--- 4 files changed, 53 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index 93186a6ed..1f8e7a779 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14265,11 +14265,6 @@ "node": ">= 0.6" } }, - "node_modules/killable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", - "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==" - }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -26540,13 +26535,14 @@ } }, "node_modules/webpack-dev-server": { - "version": "4.0.0-rc.0", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0-rc.0.tgz", - "integrity": "sha512-9S+MywBN/ecr8AbXNVUnmbFji8UTtzLR6M5Dgy6sB5Ti/73UgHn8TMhLaSBZBkY/cmSmWHDSwUXFs8lOeARpOw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0.tgz", + "integrity": "sha512-ya5cjoBSf3LqrshZn2HMaRZQx8YRNBE+tx+CQNFGaLLHrvs4Y1aik0sl5SFhLz2cW1O9/NtyaZhthc+8UiuvkQ==", "dependencies": { "ansi-html": "^0.0.7", "bonjour": "^3.5.0", "chokidar": "^3.5.1", + "colorette": "^1.2.2", "compression": "^1.7.4", "connect-history-api-fallback": "^1.6.0", "del": "^6.0.0", @@ -26556,8 +26552,6 @@ "http-proxy-middleware": "^2.0.0", "internal-ip": "^6.2.0", "ipaddr.js": "^2.0.1", - "is-absolute-url": "^3.0.3", - "killable": "^1.0.1", "open": "^8.0.9", "p-retry": "^4.5.0", "portfinder": "^1.0.28", @@ -26569,7 +26563,7 @@ "strip-ansi": "^7.0.0", "url": "^0.11.0", "webpack-dev-middleware": "^5.0.0", - "ws": "^7.5.3" + "ws": "^8.1.0" }, "bin": { "webpack-dev-server": "bin/webpack-dev-server.js" @@ -26578,7 +26572,7 @@ "node": ">= 12.13.0" }, "peerDependencies": { - "webpack": "^4.0.0 || ^5.0.0" + "webpack": "^4.37.0 || ^5.0.0" }, "peerDependenciesMeta": { "webpack-cli": { @@ -26652,6 +26646,26 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/webpack-dev-server/node_modules/ws": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.0.tgz", + "integrity": "sha512-uYhVJ/m9oXwEI04iIVmgLmugh2qrZihkywG9y5FfZV2ATeLIzHf93qs+tUNqlttbQK957/VX3mtwAS+UfIwA4g==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/webpack-manifest-plugin": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-4.0.2.tgz", @@ -27546,7 +27560,7 @@ "stylelint-webpack-plugin": "^3.0.1", "webpack": "5.50.0", "webpack-bundle-analyzer": "^4.4.2", - "webpack-dev-server": "4.0.0-rc.0", + "webpack-dev-server": "4.0.0", "webpack-manifest-plugin": "4.0.2", "workbox-webpack-plugin": "6.2.4" }, @@ -31087,7 +31101,7 @@ "stylelint-webpack-plugin": "^3.0.1", "webpack": "5.50.0", "webpack-bundle-analyzer": "^4.4.2", - "webpack-dev-server": "4.0.0-rc.0", + "webpack-dev-server": "4.0.0", "webpack-manifest-plugin": "4.0.2", "workbox-webpack-plugin": "6.2.4" }, @@ -38645,11 +38659,6 @@ "tsscmp": "1.0.6" } }, - "killable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", - "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==" - }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -48036,13 +48045,14 @@ } }, "webpack-dev-server": { - "version": "4.0.0-rc.0", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0-rc.0.tgz", - "integrity": "sha512-9S+MywBN/ecr8AbXNVUnmbFji8UTtzLR6M5Dgy6sB5Ti/73UgHn8TMhLaSBZBkY/cmSmWHDSwUXFs8lOeARpOw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0.tgz", + "integrity": "sha512-ya5cjoBSf3LqrshZn2HMaRZQx8YRNBE+tx+CQNFGaLLHrvs4Y1aik0sl5SFhLz2cW1O9/NtyaZhthc+8UiuvkQ==", "requires": { "ansi-html": "^0.0.7", "bonjour": "^3.5.0", "chokidar": "^3.5.1", + "colorette": "^1.2.2", "compression": "^1.7.4", "connect-history-api-fallback": "^1.6.0", "del": "^6.0.0", @@ -48052,8 +48062,6 @@ "http-proxy-middleware": "^2.0.0", "internal-ip": "^6.2.0", "ipaddr.js": "^2.0.1", - "is-absolute-url": "^3.0.3", - "killable": "^1.0.1", "open": "^8.0.9", "p-retry": "^4.5.0", "portfinder": "^1.0.28", @@ -48065,7 +48073,7 @@ "strip-ansi": "^7.0.0", "url": "^0.11.0", "webpack-dev-middleware": "^5.0.0", - "ws": "^7.5.3" + "ws": "^8.1.0" }, "dependencies": { "ansi-regex": { @@ -48105,6 +48113,12 @@ "requires": { "ansi-regex": "^6.0.0" } + }, + "ws": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.0.tgz", + "integrity": "sha512-uYhVJ/m9oXwEI04iIVmgLmugh2qrZihkywG9y5FfZV2ATeLIzHf93qs+tUNqlttbQK957/VX3mtwAS+UfIwA4g==", + "requires": {} } } }, diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 2202da203..1be01b115 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -101,27 +101,27 @@ module.exports = function (proxy, allowedHost) { }, // `proxy` is run between `before` and `after` `webpack-dev-server` hooks proxy, - onBeforeSetupMiddleware(app, server) { + onBeforeSetupMiddleware(devServer) { // Keep `evalSourceMapMiddleware` // middlewares before `redirectServedPath` otherwise will not have any effect // This lets us fetch source contents from webpack for the error overlay - app.use(evalSourceMapMiddleware(server)); + devServer.app.use(evalSourceMapMiddleware(devServer)); if (fs.existsSync(paths.proxySetup)) { // This registers user provided middleware for proxy reasons - require(paths.proxySetup)(app); + require(paths.proxySetup)(devServer.app); } }, - onAfterSetupMiddleware(app) { + onAfterSetupMiddleware(devServer) { // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match - app.use(redirectServedPath(paths.publicUrlOrPath)); + devServer.app.use(redirectServedPath(paths.publicUrlOrPath)); // This service worker file is effectively a 'no-op' that will reset any // previous service worker registered for the same host:port combination. // We do this in development to avoid hitting the production cache if // it used the same host and port. // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432 - app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath)); + devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath)); }, }; }; diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 0db14bc39..6a1960c0c 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -84,7 +84,7 @@ "stylelint-webpack-plugin": "^3.0.1", "webpack": "5.50.0", "webpack-bundle-analyzer": "^4.4.2", - "webpack-dev-server": "4.0.0-rc.0", + "webpack-dev-server": "4.0.0", "webpack-manifest-plugin": "4.0.2", "workbox-webpack-plugin": "6.2.4" }, diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 7bf39b4ae..f6c5da528 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -124,16 +124,14 @@ checkBrowsers(paths.appPath, isInteractive) paths.publicUrlOrPath ); // Serve webpack assets generated by the compiler over a web server. - const serverConfig = createDevServerConfig( - proxyConfig, - urls.lanUrlForConfig - ); - const devServer = new WebpackDevServer(compiler, serverConfig); + const serverConfig = { + ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig), + host: HOST, + port, + }; + const devServer = new WebpackDevServer(serverConfig, compiler); // Launch WebpackDevServer. - devServer.listen(port, HOST, err => { - if (err) { - return console.log(err); - } + devServer.startCallback(() => { if (isInteractive) { clearConsole(); }