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',