From 2ddd3ef2ace7f92908dc8dd6b6f378b706f0fea5 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 30 Dec 2022 18:32:33 -0600 Subject: [PATCH] Webpack: enable hot module replacement (HMR) --- package.json | 2 ++ webpack/development.ts | 7 +++++- webpack/rules/babel.ts | 3 +++ yarn.lock | 51 ++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 60 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index e4b1598ec..c06ecc090 100644 --- a/package.json +++ b/package.json @@ -211,6 +211,7 @@ }, "devDependencies": { "@jedmao/redux-mock-store": "^3.0.5", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.0.3", @@ -236,6 +237,7 @@ "lint-staged": ">=10", "raf": "^3.4.1", "react-intl-translations-manager": "^5.0.3", + "react-refresh": "^0.14.0", "stylelint": "^13.7.2", "stylelint-config-standard": "^22.0.0", "stylelint-scss": "^3.18.0", diff --git a/webpack/development.ts b/webpack/development.ts index 57401e7d3..9ebbca4be 100644 --- a/webpack/development.ts +++ b/webpack/development.ts @@ -3,6 +3,7 @@ console.log('Running in development mode'); // eslint-disable-line no-console import { join } from 'path'; +import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import { merge } from 'webpack-merge'; import sharedConfig from './shared'; @@ -78,7 +79,7 @@ const devServer: DevServerConfiguration = { host: devServerUrl.hostname, port: devServerUrl.port, https: devServerUrl.protocol === 'https:', - hot: false, + hot: true, allowedHosts: 'all', historyApiFallback: { disableDotRule: true, @@ -116,6 +117,10 @@ const configuration: Configuration = { watchOptions, ), + plugins: [ + new ReactRefreshWebpackPlugin(), + ], + devServer, }; diff --git a/webpack/rules/babel.ts b/webpack/rules/babel.ts index 6a6a46467..158619f07 100644 --- a/webpack/rules/babel.ts +++ b/webpack/rules/babel.ts @@ -25,6 +25,9 @@ const rule: RuleSetRule = { cacheDirectory: join(settings.cache_path, 'babel-loader'), cacheCompression: env.NODE_ENV === 'production', compact: env.NODE_ENV === 'production', + plugins: [ + 'react-refresh/babel', + ], }, }, ], diff --git a/yarn.lock b/yarn.lock index 5523b8cbf..2aa71c76b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2033,6 +2033,21 @@ dependencies: "@octokit/openapi-types" "^12.1.0" +"@pmmmwh/react-refresh-webpack-plugin@^0.5.10": + version "0.5.10" + resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8" + integrity sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA== + dependencies: + ansi-html-community "^0.0.8" + common-path-prefix "^3.0.0" + core-js-pure "^3.23.3" + error-stack-parser "^2.0.6" + find-up "^5.0.0" + html-entities "^2.1.0" + loader-utils "^2.0.4" + schema-utils "^3.0.0" + source-map "^0.7.3" + "@polka/url@^1.0.0-next.20": version "1.0.0-next.20" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.20.tgz#111b5db0f501aa89b05076fa31f0ea0e0c292cd3" @@ -4361,6 +4376,11 @@ comment-parser@1.3.1: resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b" integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA== +common-path-prefix@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0" + integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w== + commondir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" @@ -4450,6 +4470,11 @@ core-js-pure@^3.16.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.17.3.tgz#98ea3587188ab7ef4695db6518eeb71aec42604a" integrity sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ== +core-js-pure@^3.23.3: + version "3.27.1" + resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.27.1.tgz#ede4a6b8440585c7190062757069c01d37a19dca" + integrity sha512-BS2NHgwwUppfeoqOXqi08mUqS5FiZpuRuJJpKsaME7kJz0xxuk0xkhDdfMIlP/zLa80krBqss1LtD7f889heAw== + core-js@^3.1.3, core-js@^3.15.2: version "3.18.0" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49" @@ -5201,6 +5226,13 @@ error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" +error-stack-parser@^2.0.6: + version "2.1.4" + resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286" + integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ== + dependencies: + stackframe "^1.3.4" + es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2, es-abstract@^1.18.5: version "1.18.6" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.6.tgz#2c44e3ea7a6255039164d26559777a6d978cb456" @@ -6412,6 +6444,11 @@ html-encoding-sniffer@^3.0.0: dependencies: whatwg-encoding "^2.0.0" +html-entities@^2.1.0: + version "2.3.3" + resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46" + integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA== + html-entities@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.2.tgz#760b404685cb1d794e4f4b744332e3b00dcfe488" @@ -7917,7 +7954,7 @@ loader-runner@^4.2.0: resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384" integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw== -loader-utils@0.2.x, loader-utils@^2.0.0, loader-utils@^2.0.3: +loader-utils@0.2.x, loader-utils@^2.0.0, loader-utils@^2.0.3, loader-utils@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c" integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw== @@ -9754,6 +9791,11 @@ react-redux@^7.2.5: prop-types "^15.7.2" react-is "^16.13.1" +react-refresh@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" + integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== + react-router-dom@^5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363" @@ -10355,7 +10397,7 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" -schema-utils@*, schema-utils@^3.0, schema-utils@^3.1.0, schema-utils@^3.1.1: +schema-utils@*, schema-utils@^3.0, schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281" integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw== @@ -10728,6 +10770,11 @@ stack-utils@^2.0.3: escape-string-regexp "^2.0.0" source-map-support "^0.5.20" +stackframe@^1.3.4: + version "1.3.4" + resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310" + integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw== + statuses@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"