From b8105a9c2924d2beb9444a6aa8304c52bf9f7d32 Mon Sep 17 00:00:00 2001
From: andres alcocer <devandres.tech@gmail.com>
Date: Thu, 24 Nov 2022 15:16:38 -0500
Subject: [PATCH] updated webpack config file and updated readme file

---
 README.md         |  1 +
 webpack.config.js | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5dda490..b4c190e 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ This project is a simplified front end clone of Netflix. It was created with Rea
 - [ ] Update carousel to current styling
 - [ ] Create movie page screen
 - [ ] Migrate to Typescript
+- [ ] Implement dynamic code splitting with dynamic imports
 
 ### Tools used
 
diff --git a/webpack.config.js b/webpack.config.js
index b732b9a..c3e6898 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -20,11 +20,23 @@ module.exports = () => {
   return {
     entry: './src/index.js',
     output: {
+      filename: '[name].[contenthash].js',
       path: path.resolve(__dirname, 'dist'),
-      filename: 'bundle.js',
-      publicPath: '/',
       clean: true,
     },
+    optimization: {
+      runtimeChunk: 'single',
+      moduleIds: 'deterministic',
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'vendors',
+            chunks: 'all',
+          },
+        },
+      },
+    },
     mode: prod ? 'production' : 'development',
     // Enable sourcemaps for debugging webpack's output.
     devtool: prod ? 'none' : 'eval-source-map',