make npm module

Summary: We want to use the yoga playground as a standalone package as well. This adds a webpack config to bundle the playground for npm. The package can then be distributed as `yoga-playground` via npm

Reviewed By: fabiomassimo

Differential Revision: D16583334

fbshipit-source-id: 84807ddd8983ba9f0fb43570b518c975f35544ab

website/src/components/Playground/webpack.config.js

@@ -0,0 +1,63 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+    libraryExport: 'default',
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    // Don't bundle react or react-dom
+    react: {
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "React",
+      root: "React"
+    },
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "ReactDOM",
+      root: "ReactDOM"
+    }
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'index.css',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            "presets": ["@babel/preset-react"],
+            "plugins": ["@babel/plugin-transform-flow-strip-types", "@babel/plugin-proposal-class-properties"]
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              // you can specify a publicPath here
+              // by default it uses publicPath in webpackOptions.output
+              publicPath: '../',
+              hmr: process.env.NODE_ENV === 'development',
+            },
+          },
+          'css-loader',
+        ],
+      }
+    ]
+  }
+};