From 2f7cc9c33c8a73841a8224547fceb7c748f9cad0 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 14 Feb 2017 03:24:50 +0100
Subject: [PATCH] Add webpack-bundle-analyzer example (#1110)

---
 .../with-webpack-bundle-analyzer/README.md    | 28 +++++++++++++++++++
 .../next.config.js                            | 17 +++++++++++
 .../with-webpack-bundle-analyzer/package.json | 17 +++++++++++
 .../pages/about.js                            |  3 ++
 .../pages/index.js                            |  4 +++
 5 files changed, 69 insertions(+)
 create mode 100644 examples/with-webpack-bundle-analyzer/README.md
 create mode 100644 examples/with-webpack-bundle-analyzer/next.config.js
 create mode 100644 examples/with-webpack-bundle-analyzer/package.json
 create mode 100644 examples/with-webpack-bundle-analyzer/pages/about.js
 create mode 100644 examples/with-webpack-bundle-analyzer/pages/index.js

diff --git a/examples/with-webpack-bundle-analyzer/README.md b/examples/with-webpack-bundle-analyzer/README.md
new file mode 100644
index 0000000000000..3c3f6814b5b84
--- /dev/null
+++ b/examples/with-webpack-bundle-analyzer/README.md
@@ -0,0 +1,28 @@
+
+# Webpack Bundle Analyzer example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-webpack-bundle-analyzer
+cd hello-world
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to analyze the output bundles using [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer#as-plugin)
diff --git a/examples/with-webpack-bundle-analyzer/next.config.js b/examples/with-webpack-bundle-analyzer/next.config.js
new file mode 100644
index 0000000000000..2eb082aac3a27
--- /dev/null
+++ b/examples/with-webpack-bundle-analyzer/next.config.js
@@ -0,0 +1,17 @@
+const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
+module.exports = {
+  webpack: (config, { dev }) => {
+    // Perform customizations to config
+    config.plugins.push(
+      new BundleAnalyzerPlugin({
+        // For all options see https://github.com/th0r/webpack-bundle-analyzer#as-plugin
+        analyzerMode: 'server',
+        analyzerHost: '127.0.0.1',
+        analyzerPort: 8888,
+        openAnalyzer: false
+      })
+    )
+    // Important: return the modified config
+    return config
+  }
+}
diff --git a/examples/with-webpack-bundle-analyzer/package.json b/examples/with-webpack-bundle-analyzer/package.json
new file mode 100644
index 0000000000000..4148a62f3dc0f
--- /dev/null
+++ b/examples/with-webpack-bundle-analyzer/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "beta",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "webpack-bundle-analyzer": "^2.3.0"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/examples/with-webpack-bundle-analyzer/pages/about.js b/examples/with-webpack-bundle-analyzer/pages/about.js
new file mode 100644
index 0000000000000..e5db962136407
--- /dev/null
+++ b/examples/with-webpack-bundle-analyzer/pages/about.js
@@ -0,0 +1,3 @@
+export default () => (
+  <div>About us</div>
+)
diff --git a/examples/with-webpack-bundle-analyzer/pages/index.js b/examples/with-webpack-bundle-analyzer/pages/index.js
new file mode 100644
index 0000000000000..d120061e6563e
--- /dev/null
+++ b/examples/with-webpack-bundle-analyzer/pages/index.js
@@ -0,0 +1,4 @@
+import Link from 'next/link'
+export default () => (
+  <div>Hello World. <Link href='/about'><a>About</a></Link></div>
+)