Update packages and migrate to webpack 5 (#82)

Update packages and migrate to webpack5. We had an issue in react-fast-refresh on webpack5 but could resolve this issue with the workaround given in pmmmwh/react-refresh-webpack-plugin#235.
hyochan · Nov 3, 2020 · d07cbb8 · d07cbb8
1 parent af1f9d7
commit d07cbb8
Show file tree

Hide file tree

Showing 5 changed files with 669 additions and 1,829 deletions.
diff --git a/package.json b/package.json
@@ -4,8 +4,7 @@
   "description": "Build react app with typescript.",
   "postinstall": "tsc",
   "scripts": {
-    "dev": "webpack-dev-server",
-    "start": "webpack-dev-server -d --hot --config webpack.config.js --watch",
+    "start": "webpack serve --config webpack.config.js",
     "tsc": "tsc",
     "test": "jest",
     "production": "NODE_ENV=production webpack -p --config webpack.config.prod.js",
@@ -17,9 +16,9 @@
     "@svgr/webpack": "^5.4.0",
     "i18n-js": "^3.8.0",
     "prettier": "^2.1.2",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.0"
   },
@@ -38,39 +37,41 @@
     "@babel/preset-typescript": "^7.12.1",
     "@babel/runtime": "7.12.1",
     "@dooboo/eslint-config": "^0.5.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@testing-library/react": "^11.1.0",
-    "@types/jest": "^26.0.14",
-    "@types/node": "^14.11.10",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^14.14.5",
+    "@types/react": "^16.9.54",
+    "@types/react-dom": "^16.9.9",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-test-renderer": "^16.9.3",
     "@types/styled-components": "^5.1.4",
     "@types/webpack-env": "^1.15.3",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@typescript-eslint/parser": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/parser": "^4.6.0",
     "abort-controller": "^3.0.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.5.2",
+    "babel-jest": "^26.6.1",
     "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
     "codecov": "^3.8.0",
     "css-loader": "^5.0.0",
-    "eslint": "^7.11.0",
-    "expect": "^26.5.3",
-    "file-loader": "^6.1.1",
+    "eslint": "^7.12.1",
+    "expect": "^26.6.1",
+    "file-loader": "^6.2.0",
     "history": "^5.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.5.3",
+    "jest": "^26.6.1",
     "jest-fetch-mock": "^3.0.3",
-    "react-hot-loader": "^4.13.0",
-    "react-test-renderer": "^16.14.0",
+    "react-refresh": "^0.9.0",
+    "react-test-renderer": "^17.0.1",
     "script-loader": "^0.7.2",
     "style-loader": "^2.0.0",
-    "ts-jest": "^26.4.1",
-    "ts-loader": "^8.0.5",
-    "typescript": "4.0.3",
-    "webpack": "^5.1.3",
-    "webpack-cli": "^4.0.0",
+    "ts-jest": "^26.4.3",
+    "ts-loader": "^8.0.7",
+    "typescript": "4.0.5",
+    "webpack": "^5.3.0",
+    "webpack-cli": "4.1.0",
     "webpack-dev-server": "^3.11.0"
   },
   "browserslist": [

diff --git a/src/App.tsx b/src/App.tsx
@@ -21,11 +21,3 @@ const renderApp = (): void => {
 };
 
 renderApp();
-
-/* eslint-disable */
-if ((module as any).hot) {
-  (module as any).hot.accept(['./components/navigation/SwitchNavigator'], () =>
-    renderApp(),
-  );
-}
-/* eslint-enable */
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,7 +1,11 @@
 const webpack = require('webpack');
 const path = require('path');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
+  mode: 'development',
+  target: 'web',
   entry: {
     app: './src/App.tsx',
   },
@@ -10,7 +14,12 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: '/',
   },
-  plugins: [],
+  plugins: [
+    new ReactRefreshWebpackPlugin(),
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: ['!dist/favicon.ico', '!dist/index.html'],
+    }),
+  ],
   resolve: {
     modules: ['./node_modules'],
     extensions: ['.ts', '.tsx', '.js', 'jsx'],
@@ -21,6 +30,7 @@ module.exports = {
     host: 'localhost',
     port: 8080,
     historyApiFallback: true,
+    hot: true,
   },
   module: {
     rules: [
@@ -29,10 +39,11 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            query: {
+            options: {
               cacheDirectory: true,
               presets: ['@babel/preset-env', '@babel/preset-react'],
               plugins: [
+                'react-refresh/babel',
                 [
                   '@babel/plugin-transform-runtime',
                   {

diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -24,7 +24,7 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            query: {
+            options: {
               cacheDirectory: true,
               presets: ['@babel/preset-env', '@babel/preset-react'],
               plugins: [