docs(playground): fix webpack config

package.json

@@ -32,7 +32,7 @@
     "lint:fix": "yarn lint --fix",
     "lint:fix:it": "NODE_ENV=production eslint --quiet --fix --ext .tsx,.ts,.js",
     "prettier:check": "prettier --check \"**/*.{json,html,css,scss}\"",
-    "playground": "cd playground && webpack serve",
+    "playground": "cd playground && RNG_SEED='elastic-charts' webpack serve",
     "pq": "pretty-quick",
     "semantic-release": "semantic-release --debug",
     "start": "yarn storybook",

playground/playground.tsx

@@ -10,8 +10,6 @@ import React from 'react';
 
 import { Example } from '../storybook/stories/goal/22_horizontal_plusminus.story';
 
-export class Playground extends React.Component {
-  render() {
-    return <Example />;
-  }
+export function Playground() {
+  return <Example />;
 }

playground/webpack.config.js

@@ -6,12 +6,16 @@
  * Side Public License, v 1.
  */
 
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
 module.exports = {
   entry: './index.tsx',
   mode: 'development',
   output: {
     filename: 'bundle.js',
-    path: __dirname,
   },
   module: {
     rules: [
@@ -55,7 +59,20 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      hash: true,
+      template: './index.html',
+      filename: 'index.html',
+      favicon: '../public/favicon.ico',
+    }),
+    new webpack.EnvironmentPlugin({ RNG_SEED: null }),
+  ],
   resolve: {
+    alias: {
+      '@elastic/charts$': path.resolve(__dirname, '../packages/charts/src'),
+      '@elastic/charts/': path.resolve(__dirname, '../packages/charts/'),
+    },
     extensions: ['.tsx', '.ts', '.js'],
   },
 };