Merge pull request #343 from woowacourse-teams/chore/42-react-refresh

react-refresh 적용
woowacourse-teams · Aug 15, 2023 · 8f87fef · 8f87fef
2 parents 7d82b91 + 7f91fe6
commit 8f87fef
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 23 deletions.
diff --git a/client/babel.config.json b/client/babel.config.json
diff --git a/client/package.json b/client/package.json
@@ -10,10 +10,10 @@
     "solo5star <[email protected]>"
   ],
   "scripts": {
-    "start": "webpack serve",
-    "build": "webpack --config webpack.prod.js",
-    "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build"
+    "start": "cross-env NODE_ENV=development webpack serve",
+    "build": "cross-env NODE_ENV=production webpack",
+    "storybook": "cross-env NODE_ENV=development storybook dev -p 6006",
+    "build:storybook": "cross-env NODE_ENV=production storybook build"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.19",
@@ -29,6 +29,7 @@
     "@babel/core": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@storybook/addon-essentials": "7.0.25",
     "@storybook/addon-interactions": "7.0.25",
     "@storybook/addon-links": "7.0.25",
@@ -43,6 +44,7 @@
     "@typescript-eslint/parser": "^5.61.0",
     "babel-loader": "^9.1.2",
     "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
@@ -59,6 +61,7 @@
     "msw": "^1.2.2",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
+    "react-refresh": "^0.14.0",
     "storybook": "7.0.25",
     "stylelint": "^15.9.0",
     "stylelint-config-clean-order": "^5.0.1",

diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -1,15 +1,19 @@
+import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
 import DotenvWebpackPlugin from 'dotenv-webpack';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { dirname } from 'path';
+import ReactFreshBabelPlugin from 'react-refresh/babel';
 import { fileURLToPath } from 'url';
 
 const API_URL = process.env.API_URL ?? 'http://localhost:8080';
 
+const IS_DEV = process.env.NODE_ENV === 'development';
+
 /** @type {import('webpack').Configuration} */
 export default {
-  mode: 'development',
+  mode: IS_DEV ? 'development' : 'production',
   // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#installation
   context: dirname(fileURLToPath(import.meta.url)),
   entry: './src/index',
@@ -25,7 +29,22 @@ export default {
       {
         test: /\.[tj]sx?$/i,
         exclude: /node_modules/,
-        use: 'babel-loader',
+        use: {
+          loader: 'babel-loader',
+          /** @type {import('@babel/core').TransformOptions} */
+          options: {
+            presets: [
+              [
+                '@babel/preset-react',
+                {
+                  runtime: 'automatic',
+                },
+              ],
+              '@babel/preset-typescript',
+            ],
+            plugins: [IS_DEV && ReactFreshBabelPlugin].filter(Boolean),
+          },
+        },
       },
     ],
   },
@@ -41,7 +60,8 @@ export default {
       patterns: [{ from: 'public', to: '' }],
     }),
     new ForkTsCheckerWebpackPlugin(),
-  ],
+    IS_DEV && new ReactRefreshPlugin(),
+  ].filter(Boolean),
   devServer: {
     hot: true,
     port: 3000,

diff --git a/client/webpack.prod.js b/client/webpack.prod.js
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -1914,7 +1914,7 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
-"@pmmmwh/react-refresh-webpack-plugin@^0.5.5":
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.10", "@pmmmwh/react-refresh-webpack-plugin@^0.5.5":
   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==
@@ -4661,7 +4661,14 @@ cosmiconfig@^8.2.0:
     parse-json "^5.0.0"
     path-type "^4.0.0"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -8346,6 +8353,11 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+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@^6.14.1:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.14.1.tgz#0ad7ba7abdf75baa61169d49f096f0494907a36f"