Skip to content

Commit c85812c

Browse files
sjunglingsjungling
authored
refactor: convert to webpack from parceljs (#4)
* refactor: convert to webpack from parcel * ci: remove parcel * fix: define plugin to swap uri * feat: add robots
1 parent c1f704b commit c85812c

15 files changed

+2297
-2765
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ dist/
1010
schema.graphql
1111
.cache
1212
api/types/
13+
stats.json

‎package.json

+19-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
{
22
"scripts": {
3-
"build": "yarn generate && rm -rf public/* && parcel build src/index.html -d public --no-cache",
3+
"build": "yarn generate && rm -rf public/* && yarn build:webpack",
4+
"build:webpack": "NODE_ENV=production npx webpack --config webpack.prod.js",
45
"generate": "graphql-codegen --config codegen-client.yml",
5-
"format": "prettier -w '{api,src}/**/*.{ts,tsx,graphql,yml,json}'"
6+
"format": "prettier -w 'src/**/*.{ts,tsx,graphql,yml,json}' '{webpack,postcss,tailwind,vercel}*.{js,json}'",
7+
"webpack": "webpack",
8+
"start": "npx webpack serve --config webpack.dev.js"
69
},
710
"name": "space-api",
811
"version": "1.0.0",
912
"license": "MIT",
13+
"private": true,
1014
"browserslist": [
1115
"last 1 Chrome version"
1216
],
@@ -26,20 +30,30 @@
2630
"@types/react-router-dom": "^5.1.6",
2731
"apollo3-cache-persist": "^0.9.1",
2832
"autoprefixer": "^9",
33+
"clean-webpack-plugin": "^3.0.0",
34+
"copy-webpack-plugin": "^6.3.2",
35+
"css-loader": "^5.0.1",
2936
"graphql": "^15.4.0",
3037
"graphql-tools": "^7.0.2",
31-
"parcel": "^1.12.4",
32-
"parcel-plugin-bundle-visualiser": "^1.2.0",
38+
"html-webpack-plugin": "^4.5.0",
3339
"postcss": "^8.1.4",
3440
"postcss-flexbugs-fixes": "^5.0.2",
3541
"postcss-import": "^13.0.0",
42+
"postcss-loader": "^4.1.0",
3643
"preact": "^10.5.7",
3744
"preact-dom": "^1.0.1",
3845
"prettier": "^2.2.1",
3946
"react": "^17.0.1",
4047
"react-dom": "^17.0.1",
4148
"react-router-dom": "^5.2.0",
49+
"style-loader": "^2.0.0",
4250
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
43-
"typescript": "^4.1.2"
51+
"ts-loader": "^8.0.11",
52+
"typescript": "^4.1.2",
53+
"webpack": "^5.10.0",
54+
"webpack-bundle-analyzer": "^4.2.0",
55+
"webpack-cli": "^4.2.0",
56+
"webpack-dev-server": "^3.11.0",
57+
"webpack-merge": "^5.4.0"
4458
}
4559
}

‎postcss.config.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
module.exports = {
2-
plugins: [
3-
"tailwindcss"
4-
],
5-
};
2+
plugins: ["tailwindcss"],
3+
};

‎scripts/generate-schema.ts

-18
This file was deleted.

‎src/apollo-client.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client/core";
22
import { persistCache, LocalStorageWrapper } from "apollo3-cache-persist";
33
import { isDevelopment } from "./utilities";
44

5-
const GRAPHQL_URI = process.env.GRAPHQL_URI || "/api/graphql";
5+
declare var GRAPHQL_URI: string;
6+
67
const link = new HttpLink({ uri: GRAPHQL_URI, useGETForQueries: true });
78
const cache = new InMemoryCache();
89

‎src/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,5 @@
1010
<div id="root">
1111
<noscript>Thanks for visiting! I know this should be more progressively enhanced, but the purpose was to tinker with client-side rendering through Apollo GraphQL.</noscript>
1212
</div>
13-
<script src="./index.tsx"></script>
1413
</body>
1514
</html>

‎src/robots.txt

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
User-agent: *
2+
Allow: /

‎src/utilities.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export const convertSecondsToFormattedTime = (seconds) => {
99
const minutes = Math.floor(seconds / 60);
1010
seconds -= minutes * 60;
1111
return {
12-
days,
1312
hours,
13+
days,
1414
minutes,
1515
seconds,
1616
};

‎tailwind.config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const defaultTheme = require("tailwindcss/defaultTheme");
22

33
module.exports = {
4-
darkMode: 'media',
4+
darkMode: "media",
55
purge: {
6-
content: ['./src/**/*.html', './src/**/*.tsx']
7-
}
8-
};
6+
content: ["./src/**/*.html", "./src/**/*.tsx"],
7+
},
8+
};

‎tsconfig.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
"jsx": "react",
44
"esModuleInterop": true,
55
"allowSyntheticDefaultImports": true,
6-
"module": "commonjs",
6+
"module": "esnext",
77
"target": "es2017",
88
"lib": ["dom", "es2017"],
99
"moduleResolution": "node",
1010
"resolveJsonModule": true,
1111
"noImplicitAny": false,
1212
"sourceMap": true,
13-
"skipLibCheck": true
13+
"skipLibCheck": true,
14+
"outDir": "./public/"
1415
},
1516
"include": ["src"],
1617
"exclude": ["**/node_modules", "**/.*", "scripts/**"]

‎vercel.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"version": 2,
3-
"routes": [
4-
{ "handle": "filesystem" },
5-
{ "src": "/.*", "dest": "/index.html" }
6-
]
7-
}
2+
"version": 2,
3+
"routes": [
4+
{ "handle": "filesystem" },
5+
{ "src": "/.*", "dest": "/index.html" }
6+
]
7+
}

‎webpack.common.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // installed via npm
2+
const HtmlWebpackPlugin = require("html-webpack-plugin"); // installed via npm
3+
const webpack = require("webpack"); // to access built-in plugins
4+
const path = require("path");
5+
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
6+
.BundleAnalyzerPlugin;
7+
const CopyPlugin = require("copy-webpack-plugin");
8+
module.exports = {
9+
mode: "production",
10+
entry: "./src/index.tsx",
11+
module: {
12+
rules: [
13+
{
14+
test: /\.tsx?$/,
15+
use: [
16+
{
17+
loader: "ts-loader",
18+
options: {
19+
transpileOnly: true,
20+
},
21+
},
22+
],
23+
exclude: /node_modules/,
24+
},
25+
{
26+
test: /\.css$/i,
27+
use: ["style-loader", "css-loader", "postcss-loader"],
28+
},
29+
],
30+
},
31+
plugins: [
32+
new webpack.ProgressPlugin({}),
33+
new CleanWebpackPlugin(),
34+
new CopyPlugin({
35+
patterns: [{ from: "./src/robots.txt", to: "." }],
36+
}),
37+
new HtmlWebpackPlugin({ template: "./src/index.html" }),
38+
new webpack.DefinePlugin({
39+
GRAPHQL_URI: JSON.stringify(
40+
process.env.GRAPHQL_URI || "https://api.spaceapi.dev/api/graphql"
41+
),
42+
"process.env.NODE_ENV": JSON.stringify(
43+
process.env.NODE_ENV || "development"
44+
),
45+
}),
46+
47+
new BundleAnalyzerPlugin({
48+
analyzerMode: "static",
49+
openAnalyzer: false,
50+
}),
51+
],
52+
resolve: {
53+
extensions: [".tsx", ".ts", ".js"],
54+
alias: {
55+
react: "preact/compat",
56+
"react-dom/test-utils": "preact/test-utils",
57+
"react-dom": "preact/compat",
58+
// Must be below test-utils
59+
},
60+
},
61+
output: {
62+
filename: "bundle.js",
63+
path: path.resolve(process.cwd(), "public"),
64+
},
65+
};

‎webpack.dev.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const path = require("path");
2+
const { merge } = require("webpack-merge");
3+
const common = require("./webpack.common.js");
4+
5+
module.exports = merge(common, {
6+
mode: "development",
7+
devtool: "inline-source-map",
8+
devServer: {
9+
contentBase: path.join(__dirname, "public"),
10+
compress: true,
11+
port: 3000,
12+
open: true,
13+
},
14+
});

‎webpack.prod.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const { merge } = require("webpack-merge");
2+
const common = require("./webpack.common.js");
3+
4+
module.exports = merge(common, {
5+
mode: "production",
6+
});

0 commit comments

Comments
 (0)