Use webpack to bundle the playground (#4299)

.eslintignore

@@ -5,5 +5,6 @@
 /test.js
 /dist/
 **/node_modules/**
+/website/build/
 /website/static/lib/
 /tests_integration/cli/

.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,7 +1,7 @@
 {
   "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",
@@ -9,9 +9,13 @@
   },
   "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,23 @@
+"use strict";
+
+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"]
+        }
+      }
+    ]
+  }
+};