fet: add examples

examples/server.js

+const express = require('express');
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const WebpackConfig = require('./webpack.config');
+
+const app = express();
+const compiler = webpack(WebpackConfig);
+
+app.use(
+  webpackDevMiddleware(compiler, {
+    publicPath: '/__build__/',
+    stats: {
+      colors: true,
+      chunks: false,
+    },
+  }),
+);
+
+app.use(webpackHotMiddleware(compiler));
+
+const port = process.env.PORT || 8080;
+module.exports = app.listen(port, () => {
+  console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`);
+});

examples/webpack.config.js

+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: 'development',
+  entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
+    const fullDir = path.join(__dirname, dir);
+    const entry = path.join(fullDir, 'app.js');
+    if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
+      entries[dir] = ['webpack-hot-middleware/client', entry];
+    }
+
+    return entries;
+  }, {}),
+  output: {
+    path: path.join(__dirname, '__build__'),
+    filename: '[name].js',
+    publicPath: '/__build__/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: options.babelQuery,
+        },
+      },
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.less$/,
+
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                getLocalIdent: (context, _, localName) => {
+                  if (
+                    context.resourcePath.includes('node_modules') ||
+                    context.resourcePath.includes('ant.design.pro.less') ||
+                    context.resourcePath.includes('global.less')
+                  ) {
+                    return localName;
+                  }
+
+                  const match = context.resourcePath.match(/src(.*)/);
+
+                  if (match && match[1]) {
+                    const antdProPath = match[1].replace('.less', '');
+                    const arr = slash(antdProPath)
+                      .split('/')
+                      .map((a) => a.replace(/([A-Z])/g, '-$1'))
+                      .map((a) => a.toLowerCase());
+                    return `panda-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
+                  }
+
+                  return localName;
+                },
+              },
+            },
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        include: /node_modules/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(eot|otf|ttf|woff|woff2)$/,
+        use: 'file-loader',
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'svg-url-loader',
+            options: {
+              // Inline files smaller than 10 kB
+              limit: 10 * 1024,
+              noquotes: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(jpg|png|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10 * 1024,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.html$/,
+        use: 'html-loader',
+      },
+      {
+        test: /\.(mp4|webm)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.jsx', '.js'],
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()],
+};

package.json

@@ -102,7 +102,10 @@
     "webpack-dev-server": "^3.11.0",
     "write-pkg": "^4.0.0",
     "xhr-mock": "^2.5.1",
-    "yorkie": "^2.0.0"
+    "yorkie": "^2.0.0",
+    "express": "^4.16.4",
+    "webpack-dev-middleware": "^3.5.0",
+    "webpack-hot-middleware": "^2.24.3"
   },
   "gitHooks": {
     "pre-commit": "pretty-quick --staged",

webpack.config.js

@@ -68,7 +68,7 @@ tailPkgs.forEach((pkg) => {
           },
         },
         {
-          test: /\.tsx?$/,
+          test: /\.jsx?$/,
           exclude: /(node_modules|bower_components)/,
           use: {
             loader: 'babel-loader',