Migrate from parcel v2 to webpack

This was motivated by parcel's inability to properly tree shake the Material UI library, as well as its half-baked bundle analysis solutions in v2. parcel-bundler/parcel#4565
mattrossman · Jul 26, 2020 · c0f71ac · c0f71ac
1 parent 923acd5
commit c0f71ac
Show file tree

Hide file tree

Showing 8 changed files with 1,127 additions and 2,817 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -1,2 +1,9 @@
 [build]
-	functions = "./functions"
+	publish = "dist/"
+	command = "yarn webpack:build"
+	functions = "./functions"
+[dev]
+	framework = "#custom"
+	command = "yarn webpack:dev"
+	targetPort = 9000
+	autoLaunch = true
diff --git a/package.json b/package.json
@@ -12,31 +12,42 @@
   "scripts": {
     "dev": "netlify dev",
     "build": "netlify build",
-    "parcel:start": "parcel ./src/index.html",
-    "parcel:build": "parcel build ./src/index.html",
-    "parcel:analyze": "PARCEL_BUNDLE_ANALYZER=1 BUNDLE_BUDDY=1 yarn parcel:build",
+    "webpack:dev": "webpack-dev-server",
+    "webpack:build": "webpack",
+    "analyze": "ANALYZE=true webpack",
     "clean": "killall node && rm -rf .parcel-cache dist"
   },
   "babel": {
     "presets": [
+      "@babel/preset-env",
       "preact"
+    ],
+    "plugins": [
+      "babel-plugin-transform-inline-environment-variables"
     ]
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "firebase": "^7.16.1",
     "firebase-admin": "^9.0.0",
-    "htm": "^3.0.4",
-    "parcel": "^2.0.0-beta.1",
     "preact": "^10.4.6",
     "redaxios": "^0.3.0",
     "string-hash": "^1.1.3",
     "unique-names-generator": "^4.3.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "babel-preset-preact": "^2.0.0",
+    "html-webpack-plugin": "^4.3.0",
     "netlify-cli": "^2.58.0",
-    "netlify-lambda": "^2.0.1"
+    "netlify-lambda": "^2.0.1",
+    "webpack": "^4.44.0",
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   }
 }
diff --git a/src/components/footer.js b/src/components/footer.js
diff --git a/src/components/header.js b/src/components/header.js
diff --git a/src/index.html b/src/index.html
@@ -4,8 +4,6 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
 	<title>hmd.link</title>
-	<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> -->
-    <script src="./app.jsx" defer></script>
 </head>
 <body>
 

diff --git a/src/app.jsx → src/index.jsx b/src/app.jsx → src/index.jsx
@@ -1,15 +1,12 @@
 import { h, render } from 'preact'
 import { useState, useEffect, useRef } from 'preact/hooks'
 
-import { html } from 'htm/preact';
 import axios from 'redaxios';
 import { uniqueNamesGenerator, adjectives, colors, animals } from 'unique-names-generator';
 
 import { createMuiTheme, ThemeProvider, CssBaseline, responsiveFontSizes } from "@material-ui/core";
 
-import { Header } from './components/header'
-import { Footer } from './components/footer'
-import { MainContent } from './components/main/content'
+import { MainContent } from './components/main/content.jsx'
 
 import * as firebase from "firebase/app";
 import "firebase/firestore";
@@ -22,6 +19,7 @@ const firebaseConfig = {
 	projectId: process.env.FIREBASE_PROJECT_ID,
 };
 
+
 if (firebase.apps.length == 0) firebase.initializeApp(firebaseConfig);
 
 const db = firebase.firestore();
@@ -68,48 +66,48 @@ const getUniqueName = (seed) => {
 	})
 }
 
-const App = () => {
-	const uid = useUid(null)
-	const authorized = uid !== null;
-	const input = useRef(null);
-	const doc = useDoc(uid);
-	const url = doc && doc.url;
-	const submitLink = async () => {
-		if (authorized) {	
-			const payload = {
-				url: input.current.value,
-				timestamp: Date.now()
-			}
-			console.log("Sending payload: " + JSON.stringify(payload))
-			await db.collection("rooms").doc(uid).set(payload)
-		}
-	}
-	const followLink = () => {
-		window.open(url, '_blank');
-	}
-	return html`
-	<div class="container">
-		<${Header}/>
-		<div class="content">
-			<p>${uid === null ? 'Connecting...' : 'Room name: ' + getUniqueName(uid)}</p>
-			<label for="url-input">Enter a URL:</label>
-			<input id="url-input" ref=${input} type="text" />
-			<button onClick=${submitLink}>Submit</button>
-			${url && html`
-			<div>
-				<label for="btnSavedLink">Saved link: ${url}</label>
-				<button id="btnSavedLink" onClick=${followLink}>Go!</button>
-			</div>
-			`}
+// const App = () => {
+// 	const uid = useUid(null)
+// 	const authorized = uid !== null;
+// 	const input = useRef(null);
+// 	const doc = useDoc(uid);
+// 	const url = doc && doc.url;
+// 	const submitLink = async () => {
+// 		if (authorized) {	
+// 			const payload = {
+// 				url: input.current.value,
+// 				timestamp: Date.now()
+// 			}
+// 			console.log("Sending payload: " + JSON.stringify(payload))
+// 			await db.collection("rooms").doc(uid).set(payload)
+// 		}
+// 	}
+// 	const followLink = () => {
+// 		window.open(url, '_blank');
+// 	}
+// 	return html`
+// 	<div class="container">
+// 		<${Header}/>
+// 		<div class="content">
+// 			<p>${uid === null ? 'Connecting...' : 'Room name: ' + getUniqueName(uid)}</p>
+// 			<label for="url-input">Enter a URL:</label>
+// 			<input id="url-input" ref=${input} type="text" />
+// 			<button onClick=${submitLink}>Submit</button>
+// 			${url && html`
+// 			<div>
+// 				<label for="btnSavedLink">Saved link: ${url}</label>
+// 				<button id="btnSavedLink" onClick=${followLink}>Go!</button>
+// 			</div>
+// 			`}
 
-			<Button variant="contained" color="primary">
-				Hello World
-			</Button>
-		</div>
-		<!-- <${Footer}/> -->
-	</div>
-	`
-}
+// 			<Button variant="contained" color="primary">
+// 				Hello World
+// 			</Button>
+// 		</div>
+// 		<!-- <${Footer}/> -->
+// 	</div>
+// 	`
+// }
 
 const darkTheme = createMuiTheme({
 	palette: {

diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,39 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+	entry: './src/index.jsx',
+	output: {
+		filename: 'main.js',
+		path: path.resolve(__dirname, 'dist'),
+	},
+	devServer: {
+		contentBase: path.join(__dirname, 'dist'),
+		compress: true,
+		port: 9000
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+            template: './src/index.html',
+		})
+	],
+	module: {
+		rules: [
+			{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
+		]
+	},
+	resolve: {
+		extensions: ['.js', '.jsx'],
+		alias: {
+			"react": "preact/compat",
+			"react-dom": "preact/compat"
+		}
+	}
+};
+
+
+if (process.env.ANALYZE !== undefined) {
+	const bundleAnalyzer = new BundleAnalyzerPlugin()
+	module.exports.plugins.push(bundleAnalyzer);
+}