optimize webpack

victorekpo · Jul 14, 2024 · f28acce · f28acce
1 parent 11dca26
commit f28acce
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 14 deletions.
diff --git a/client/package.json b/client/package.json
@@ -35,6 +35,7 @@
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.6.0",
     "postcss": "^8.4.39",
     "postcss-loader": "^8.1.1",
     "sass": "^1.62.0",

diff --git a/client/public/assets/README.md b/client/public/assets/README.md
@@ -0,0 +1 @@
+This folder will hold assets that are not brought in automatically by webpack
diff --git a/client/public/index.html b/client/public/index.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>React App on Cloudflare Workers</title>
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css"/>
+    <link rel="stylesheet" type="text/css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div id="root"></div>
-<script src="bundle.js"></script>
 </body>
 </html>
diff --git a/client/src/routers/handler.js b/client/src/routers/handler.js
@@ -15,7 +15,7 @@ export const routesAndAssetsHandler = async (event, router) => {
 
   // Check if the request is for a static asset (e.g., bundle.js, .html, .ico, .svg, .jpg, .png, .css)
   if (
-    request.url.endsWith('/bundle.js')
+    (request.url.includes('bundle') && request.url.endsWith('.js'))
     || request.url.endsWith('.html')
     || request.url.endsWith('/favicon.ico')
     || request.url.endsWith('.svg')
@@ -28,7 +28,7 @@ export const routesAndAssetsHandler = async (event, router) => {
       // Pass the entire event object to getAssetFromKV
       return await getAssetFromKV(event);
     } catch (e) {
-      return new Response(`Bundle not found: ${e.message}`, {
+      return new Response(`Bundle not found: ${ e.message }`, {
         status: 404,
         statusText: 'Not Found',
       });
@@ -37,4 +37,6 @@ export const routesAndAssetsHandler = async (event, router) => {
 
   // For any other requests, handle them with the router
   return router.handle(request);
-};
+};
+
+// Note: If getting Uncaught SyntaxError: Unexpected token '<', this is an indicator that the asset might not be mapped properly.
diff --git a/client/src/routers/root/router.js b/client/src/routers/root/router.js
@@ -1,13 +1,13 @@
-import indexHTML from '../../../public/index.html';
+import indexHTML from '../../../dist/index.html';
 
 /**
  * Handles requests to serve the index.html file.
  * Uses the indexHTML imported from the public directory.
  */
 export const rootHandler = async (request) => {
-    return new Response(indexHTML, {
-      headers: {
-        'Content-Type': 'text/html',
-      },
-    });
+  return new Response(indexHTML, {
+    headers: {
+      'Content-Type': 'text/html',
+    },
+  });
 };
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -1,15 +1,18 @@
 const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   mode: 'production',
   entry: './src/main.js',
   output: {
-    filename: 'bundle.[contenthash].js', // Use content hash for cache busting
+    filename: 'bundle.[contenthash:8].js', // Use content hash for cache busting
     path: path.resolve(__dirname, 'dist'),
+    sourceMapFilename: '[name].[contenthash:8].map', // Add source maps
+    chunkFilename: '[id].[contenthash:8].js', // Use contenthash for chunks
   },
   module: {
     rules: [
@@ -42,9 +45,17 @@ module.exports = {
   plugins: [
     new CopyWebpackPlugin({
       patterns: [
-        { from: './public', to: '' }, // Copy all files from public directory to dist
+        {
+          from: 'public/assets', // Source directory
+          to: 'assets', // Target directory in the output path
+        },
       ],
     }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+      filename: 'index.html',
+      inject: 'body',
+    }),
     new CompressionPlugin()
   ],
   resolve: {
@@ -69,6 +80,8 @@ module.exports = {
     ],
     splitChunks: {
       chunks: 'all',
+      minSize: 0,
+      minChunks: 1
     },
   }
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This folder will hold assets that are not brought in automatically by webpack