Include webpack to bundle the playground

.gitignore

@@ -9,6 +9,7 @@
 /website/node_modules
 /website/build
 /website/i18n
+/website/static/playground.js
 /website/static/lib
 .DS_Store
 coverage

website/README.md

@@ -104,3 +104,7 @@ If you wish to manually publish your website with the `publish-gh-pages` script,
 ```
 DEPLOY_USER=deltice GIT_USER=test-site-bot CIRCLE_PROJECT_USERNAME=deltice CIRCLE_PROJECT_REPONAME=test-site CIRCLE_BRANCH=master npm run publish-gh-pages
 ```
+
+## Playground
+
+The playground is not integrated with the Docusaurus infrastructure. If you want to edit something in the playground, you need to run `yarn start` to start the Docusaurus server and `webpack --watch` in a separate shell to compile the playground changes.

website/package.json

@@ -1,17 +1,21 @@
 {
   "license": "MIT",
   "scripts": {
-    "build": "docusaurus-build",
+    "build": "webpack -p && docusaurus-build",
     "publish-gh-pages": "docusaurus-publish",
     "start": "docusaurus-start",
     "svgo": "svgo --pretty --indent=2 --config=svgo.yml",
     "svgo-all": "find static | grep '\\.svg$' | xargs -Iz -n 1 yarn svgo z"
   },
   "devDependencies": {
     "@sandhose/prettier-animated-logo": "1.0.3",
+    "babel-loader": "7.1.4",
+    "babel-preset-env": "1.6.1",
     "docusaurus": "1.0.5",
     "js-yaml": "3.10.0",
     "svgo": "1.0.4",
-    "sw-toolbox": "3.6.0"
+    "sw-toolbox": "3.6.0",
+    "webpack": "4.5.0",
+    "webpack-cli": "2.0.14"
   }
 }

website/webpack.config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+const webpack = require('webpack')
+
+module.exports = {
+  entry: {
+    playground: './playground/index.js'
+  },
+  output: {
+    filename: '[name].js',
+    path: __dirname + '/static/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['env']
+        }
+      }
+    ]
+  }
+}