Skip to content

Commit 043bb10

Browse files
committed
refactor(:recycle:) webpack@5 for playground
1 parent 11e0542 commit 043bb10

File tree

7 files changed

+12411
-4305
lines changed

7 files changed

+12411
-4305
lines changed

package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"lint": "eslint \"src/**/*.{ts,tsx}\"",
2222
"test": "jest",
2323
"clean": "rimraf pkg/**",
24-
"build": "npm-run-all --parallel ts-check lint clean test && pika build",
24+
"build": "npm-run-all --parallel ts-check lint clean test -s build:pika",
25+
"build:pika": "pika build",
2526
"ts-check": "tsc --noEmit",
2627
"version": "npm run build"
2728
},

playground/package-lock.json

+12,346-4,270
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

playground/package.json

+15-11
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
"main": "index.js",
77
"scripts": {
88
"test": "echo \"Error: no test specified\" && exit 1",
9-
"start": "NODE_ENV=development webpack-dev-server --quiet --mode development",
10-
"start:dev": "NODE_ENV=development webpack-dev-server --open --hot --progress --mode development",
9+
"start": "NODE_ENV=development webpack serve --mode development",
1110
"prebuild": "npm ci",
1211
"build": "npm run prebuild && webpack",
1312
"start:ci": "serve -s dist/"
@@ -16,23 +15,28 @@
1615
"author": "",
1716
"license": "MIT",
1817
"devDependencies": {
19-
"@hot-loader/react-dom": "^16.13.0",
18+
"@babel/core": "^7.12.8",
19+
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
2020
"@teamsupercell/typings-for-css-modules-loader": "^2.3.0",
21-
"@types/react": "^16.9.49",
22-
"@types/react-dom": "^16.9.8",
21+
"@types/react": "^17.0.0",
22+
"@types/react-dom": "^17.0.0",
23+
"@types/webpack": "^4.41.25",
2324
"@welldone-software/why-did-you-render": "^4.3.1",
24-
"css-loader": "^4.3.0",
25+
"babel-loader": "^8.2.1",
26+
"css-loader": "^5.0.0",
2527
"file-loader": "^6.1.0",
2628
"html-webpack-plugin": "^4.4.1",
27-
"mini-css-extract-plugin": "^0.11.0",
29+
"mini-css-extract-plugin": "^1.0.0",
2830
"postcss-loader": "^4.0.0",
29-
"react-hot-loader": "^4.12.21",
31+
"react-refresh": "^0.9.0",
3032
"sass": "^1.26.10",
3133
"sass-loader": "^10.0.2",
32-
"style-loader": "^1.2.1",
34+
"style-loader": "^2.0.0",
3335
"ts-loader": "^8.0.3",
34-
"webpack": "^4.44.1",
35-
"webpack-cli": "^3.3.12",
36+
"ts-node": "^9.0.0",
37+
"type-fest": "^0.13.1",
38+
"webpack": "^5.6.0",
39+
"webpack-cli": "^4.2.0",
3640
"webpack-dev-server": "^3.11.0"
3741
},
3842
"dependencies": {

playground/public/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>PCR Playground</title>
6+
<style type="text/css">
7+
:root {
8+
font-family: 'Roboto', Arial, Helvetica, sans-serif;
9+
}
10+
pre,
11+
code {
12+
font-family: 'Dank Mono', Concolas, 'Courier New', Courier, monospace;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="root"></div>
18+
</body>
19+
</html>

playground/src/index.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import './wdyr';
2-
import 'react-hot-loader';
3-
import { hot } from 'react-hot-loader/root';
42

53
import React from 'react';
64
import ReactDOM from 'react-dom';
@@ -16,7 +14,7 @@ import { Indeterminate } from './sections/Indeterminate';
1614
import 'pretty-checkbox/src/pretty-checkbox.scss';
1715
// import '@mdi/font/css/materialdesignicons.css';
1816

19-
function Main() {
17+
function App() {
2018
return (
2119
<main>
2220
<Basic />
@@ -30,6 +28,4 @@ function Main() {
3028
);
3129
}
3230

33-
const App = hot(Main);
34-
3531
ReactDOM.render(<App />, document.querySelector('#root'));

playground/tsconfig.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
{
22
"compilerOptions": {
3-
"outDir": "./dist/",
43
"sourceMap": true,
54
"noImplicitAny": false,
65
"module": "commonjs",
7-
"target": "es5",
6+
"target": "es6",
87
"jsx": "react",
98
"allowJs": true,
109
"esModuleInterop": true,

playground/webpack.config.js renamed to playground/webpack.config.ts

+27-16
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
/* eslint-disable @typescript-eslint/no-var-requires */
2-
const path = require('path');
2+
import * as path from 'path';
3+
import * as webpack from 'webpack';
34

4-
const HtmlWebpackPlugin = require('html-webpack-plugin');
5-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5+
import HtmlWebpackPlugin from 'html-webpack-plugin';
6+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
7+
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
68

7-
module.exports = {
8-
mode: process.env.NODE_ENV || 'development',
9+
const __DEV__ = (process.env.NODE_ENV as webpack.Configuration['mode']) || 'development';
10+
11+
const config: webpack.Configuration = {
12+
mode: __DEV__,
913
entry: path.resolve(__dirname, './src/index.tsx'),
1014
output: {
1115
path: path.resolve(__dirname, './dist'),
@@ -17,25 +21,22 @@ module.exports = {
1721
chunkFilename: '[id].[contenthash].css',
1822
}),
1923
new HtmlWebpackPlugin({ template: path.resolve('./public/index.html') }),
20-
],
24+
__DEV__ && new webpack.HotModuleReplacementPlugin(),
25+
__DEV__ && new ReactRefreshWebpackPlugin(),
26+
].filter(Boolean),
2127
resolve: {
2228
extensions: ['.tsx', '.ts', '.js'],
2329
alias: {
24-
'react-dom': '@hot-loader/react-dom',
30+
react: path.join(__dirname, '../node_modules/react'),
31+
'react-dom': path.join(__dirname, '../node_modules/react-dom'),
2532
},
2633
},
2734
module: {
2835
rules: [
2936
{
3037
test: /\.(sa|sc|c)ss$/,
3138
use: [
32-
{
33-
loader: MiniCssExtractPlugin.loader,
34-
options: {
35-
hmr: process.env.NODE_ENV === 'development',
36-
reloadAll: true,
37-
},
38-
},
39+
MiniCssExtractPlugin.loader,
3940
{
4041
loader: '@teamsupercell/typings-for-css-modules-loader',
4142
options: {
@@ -63,7 +64,13 @@ module.exports = {
6364
},
6465
{
6566
test: /\.tsx?$/,
66-
use: 'ts-loader',
67+
use: [
68+
__DEV__ && {
69+
loader: 'babel-loader',
70+
options: { plugins: ['react-refresh/babel'] },
71+
},
72+
'ts-loader',
73+
].filter(Boolean),
6774
exclude: /node_modules/,
6875
},
6976
{
@@ -72,9 +79,13 @@ module.exports = {
7279
},
7380
],
7481
},
75-
devtool: 'cheap-module-eval-source-map',
82+
devtool: 'eval-cheap-module-source-map',
83+
// @ts-ignore
7684
devServer: {
7785
compress: true,
7886
port: 9000,
87+
hot: true,
7988
},
8089
};
90+
91+
export default config;

0 commit comments

Comments
 (0)