diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx
index 5f0d559f1a1d..e74f2aa60120 100644
--- a/src/content/guides/getting-started.mdx
+++ b/src/content/guides/getting-started.mdx
@@ -244,9 +244,26 @@ As of version 4, webpack doesn't require any configuration, but most projects wi
     |- index.js
 ```
 
-**webpack.config.js**
+<CodeGroup>
+
+<CodeBlock label="webpack.config.mjs" active>
 
 ```javascript
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default {
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};
+</CodeBlock>
+
+<CodeBlock label="webpack.config.cjs / .js">
 const path = require('path');
 
 module.exports = {
@@ -256,7 +273,10 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
   },
 };
-```
+</CodeBlock>
+
+</CodeGroup>
+
 
 Now, let's run the build again but instead using our new configuration file: