refactor(:recycle:) webpack@5 for playground

atomicpages · atomicpages · commit 043bb10c9e55 · 2020-11-24T09:10:49.000-08:00
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
         "lint": "eslint \"src/**/*.{ts,tsx}\"",
         "test": "jest",
         "clean": "rimraf pkg/**",
-        "build": "npm-run-all --parallel ts-check lint clean test && pika build",
+        "build": "npm-run-all --parallel ts-check lint clean test -s build:pika",
+        "build:pika": "pika build",
         "ts-check": "tsc --noEmit",
         "version": "npm run build"
     },
diff --git a/playground/package-lock.json b/playground/package-lock.json
diff --git a/playground/package.json b/playground/package.json
@@ -6,8 +6,7 @@
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "start": "NODE_ENV=development webpack-dev-server --quiet --mode development",
-        "start:dev": "NODE_ENV=development webpack-dev-server --open --hot --progress --mode development",
+        "start": "NODE_ENV=development webpack serve --mode development",
         "prebuild": "npm ci",
         "build": "npm run prebuild && webpack",
         "start:ci": "serve -s dist/"
@@ -16,23 +15,28 @@
     "author": "",
     "license": "MIT",
     "devDependencies": {
-        "@hot-loader/react-dom": "^16.13.0",
+        "@babel/core": "^7.12.8",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
         "@teamsupercell/typings-for-css-modules-loader": "^2.3.0",
-        "@types/react": "^16.9.49",
-        "@types/react-dom": "^16.9.8",
+        "@types/react": "^17.0.0",
+        "@types/react-dom": "^17.0.0",
+        "@types/webpack": "^4.41.25",
         "@welldone-software/why-did-you-render": "^4.3.1",
-        "css-loader": "^4.3.0",
+        "babel-loader": "^8.2.1",
+        "css-loader": "^5.0.0",
         "file-loader": "^6.1.0",
         "html-webpack-plugin": "^4.4.1",
-        "mini-css-extract-plugin": "^0.11.0",
+        "mini-css-extract-plugin": "^1.0.0",
         "postcss-loader": "^4.0.0",
-        "react-hot-loader": "^4.12.21",
+        "react-refresh": "^0.9.0",
         "sass": "^1.26.10",
         "sass-loader": "^10.0.2",
-        "style-loader": "^1.2.1",
+        "style-loader": "^2.0.0",
         "ts-loader": "^8.0.3",
-        "webpack": "^4.44.1",
-        "webpack-cli": "^3.3.12",
+        "ts-node": "^9.0.0",
+        "type-fest": "^0.13.1",
+        "webpack": "^5.6.0",
+        "webpack-cli": "^4.2.0",
         "webpack-dev-server": "^3.11.0"
     },
     "dependencies": {
diff --git a/playground/public/index.html b/playground/public/index.html
@@ -0,0 +1,19 @@
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PCR Playground</title>
+        <style type="text/css">
+            :root {
+                font-family: 'Roboto', Arial, Helvetica, sans-serif;
+            }
+            pre,
+            code {
+                font-family: 'Dank Mono', Concolas, 'Courier New', Courier, monospace;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/playground/src/index.tsx b/playground/src/index.tsx
@@ -1,6 +1,4 @@
 import './wdyr';
-import 'react-hot-loader';
-import { hot } from 'react-hot-loader/root';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -16,7 +14,7 @@ import { Indeterminate } from './sections/Indeterminate';
 import 'pretty-checkbox/src/pretty-checkbox.scss';
 // import '@mdi/font/css/materialdesignicons.css';
 
-function Main() {
+function App() {
     return (
         <main>
             <Basic />
@@ -30,6 +28,4 @@ function Main() {
     );
 }
 
-const App = hot(Main);
-
 ReactDOM.render(<App />, document.querySelector('#root'));
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -1,10 +1,9 @@
 {
     "compilerOptions": {
-        "outDir": "./dist/",
         "sourceMap": true,
         "noImplicitAny": false,
         "module": "commonjs",
-        "target": "es5",
+        "target": "es6",
         "jsx": "react",
         "allowJs": true,
         "esModuleInterop": true,
diff --git a/playground/webpack.config.ts b/playground/webpack.config.ts
@@ -1,11 +1,15 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
+import * as path from 'path';
+import * as webpack from 'webpack';
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
-module.exports = {
-    mode: process.env.NODE_ENV || 'development',
+const __DEV__ = (process.env.NODE_ENV as webpack.Configuration['mode']) || 'development';
+
+const config: webpack.Configuration = {
+    mode: __DEV__,
     entry: path.resolve(__dirname, './src/index.tsx'),
     output: {
         path: path.resolve(__dirname, './dist'),
@@ -17,25 +21,22 @@ module.exports = {
             chunkFilename: '[id].[contenthash].css',
         }),
         new HtmlWebpackPlugin({ template: path.resolve('./public/index.html') }),
-    ],
+        __DEV__ && new webpack.HotModuleReplacementPlugin(),
+        __DEV__ && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
         alias: {
-            'react-dom': '@hot-loader/react-dom',
+            react: path.join(__dirname, '../node_modules/react'),
+            'react-dom': path.join(__dirname, '../node_modules/react-dom'),
         },
     },
     module: {
         rules: [
             {
                 test: /\.(sa|sc|c)ss$/,
                 use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            hmr: process.env.NODE_ENV === 'development',
-                            reloadAll: true,
-                        },
-                    },
+                    MiniCssExtractPlugin.loader,
                     {
                         loader: '@teamsupercell/typings-for-css-modules-loader',
                         options: {
@@ -63,7 +64,13 @@ module.exports = {
             },
             {
                 test: /\.tsx?$/,
-                use: 'ts-loader',
+                use: [
+                    __DEV__ && {
+                        loader: 'babel-loader',
+                        options: { plugins: ['react-refresh/babel'] },
+                    },
+                    'ts-loader',
+                ].filter(Boolean),
                 exclude: /node_modules/,
             },
             {
@@ -72,9 +79,13 @@ module.exports = {
             },
         ],
     },
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'eval-cheap-module-source-map',
+    // @ts-ignore
     devServer: {
         compress: true,
         port: 9000,
+        hot: true,
     },
 };
+
+export default config;
