finos · texodus · Jan 13, 2020 · Jan 10, 2020
diff --git a/examples/webpack-cross-origin/README.md b/examples/webpack-cross-origin/README.md
@@ -0,0 +1,4 @@
+# Webpack Example
+
+An example of consuming perspective through webpack, via `webpack-dev-server`, 
+hosted cross origin.
diff --git a/examples/webpack-cross-origin/package.json b/examples/webpack-cross-origin/package.json
@@ -0,0 +1,31 @@
+{
+    "name": "webpack-cross-origin",
+    "private": true,
+    "version": "0.4.0",
+    "description": "An example of using the Perspective Webpack plugin to build a JS file with Webpack.",
+    "scripts": {
+        "start": "npm-run-all -l -p webpack-watch host:app host:bundles",
+        "host:app": "http-server ./dist/public -p 5150 -c-1",
+        "host:bundles": "http-server ./dist -p 8080 -c-1 --cors",
+        "webpack-watch": "webpack --watch"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.4.0",
+        "@finos/perspective-viewer": "^0.4.0",
+        "@finos/perspective-viewer-d3fc": "^0.4.0",
+        "@finos/perspective-viewer-hypergrid": "^0.4.0"
+    },
+    "devDependencies": {
+        "@finos/perspective-webpack-plugin": "^0.4.0",
+        "css-loader": "^0.28.7",
+        "html-webpack-plugin": "^3.2.0",
+        "http-server": "^0.11.1",
+        "less-loader": "^4.0.5",
+        "npm-run-all": "^4.1.3",
+        "style-loader": "^0.18.2",
+        "webpack": "^4.41.2",
+        "webpack-dev-server": "3.9.0"
+    }
+}
diff --git a/examples/webpack-cross-origin/src/index.css b/examples/webpack-cross-origin/src/index.css
@@ -0,0 +1,17 @@
+
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+perspective-viewer { 
+    position: absolute; 
+    top: 0; 
+    left: 0; 
+    right: 0; 
+    bottom: 0; 
+}
diff --git a/examples/webpack-cross-origin/src/index.html b/examples/webpack-cross-origin/src/index.html
@@ -0,0 +1,17 @@
+<!--
+
+   Copyright (c) 2017, the Perspective Authors.
+
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+-->
+
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Perspective Webpack Example (Cross-Origin)</title>
+    </head>
+    <body>
+        <perspective-viewer></perspective-viewer>
+    </body>
+</html>
diff --git a/examples/webpack/index.js → examples/webpack-cross-origin/src/index.js b/examples/webpack/index.js → examples/webpack-cross-origin/src/index.js
@@ -8,7 +8,7 @@
  */
 
 import perspective from "@finos/perspective";
-import "./index.less";
+import "./index.css";
 import "@finos/perspective-viewer";
 import "@finos/perspective-viewer-hypergrid";
 import "@finos/perspective-viewer-d3fc";

diff --git a/examples/webpack-cross-origin/webpack.config.js b/examples/webpack-cross-origin/webpack.config.js
@@ -0,0 +1,56 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const PerspectivePlugin = require("@finos/perspective-webpack-plugin");
+
+module.exports = {
+    context: __dirname,
+    entry: "./src/index.js",
+    mode: "development",
+    output: {
+        filename: "public/bundle.js",
+        publicPath: "http://localhost:8080/"
+    },
+    plugins: [
+        new HtmlWebPackPlugin({
+            title: "Perspective Webpack Cross-Origin Example",
+            template: "./src/index.html",
+            filename: "public/index.html",
+            inject: "head"
+        }),
+        new PerspectivePlugin({
+            wasmLoaderOptions: {
+                name: "[hash].wasm"
+            },
+            workerLoaderOptions: {
+                name: "[hash].worker.[ext]"
+            }
+        })
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                exclude: [/packages/, /node_modules/],
+                use: [{loader: "style-loader"}, {loader: "css-loader"}]
+            }
+        ]
+    },
+    devtool: "source-map",
+    devServer: {
+        historyApiFallback: true,
+        watchOptions: {aggregateTimeout: 300, poll: 1000},
+        headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+        }
+    }
+};
diff --git a/examples/webpack/.gitignore b/examples/webpack/.gitignore
diff --git a/examples/webpack/README.md b/examples/webpack/README.md
@@ -1,4 +1,3 @@
 # Webpack Example
 
-An exmple of consuming perspective through webpack, via `webpack-dev-server`, 
-hosted cross origin.
+Simple webpack example using `perspective-viewer` and plugins.
diff --git a/examples/webpack/index.less b/examples/webpack/index.less
diff --git a/examples/webpack/output/public/index.html b/examples/webpack/output/public/index.html
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -2,12 +2,10 @@
     "name": "webpack",
     "private": true,
     "version": "0.4.0",
-    "description": "An example of using the Perspective Webpack plugin to build a JS file with Webpack.",
+    "description": "An example app built using `@finos/perspective-phosphor`.",
     "scripts": {
-        "start": "npm-run-all -l -p webpack-watch host:app host:bundles",
-        "host:app": "http-server ./output/public -p 5150 -c-1",
-        "host:bundles": "http-server ./output -p 8080 -c-1 --cors",
-        "webpack-watch": "webpack --watch"
+        "start": "webpack-dev-server --open",
+        "webpack": "webpack --colour"
     },
     "keywords": [],
     "license": "Apache-2.0",
@@ -20,12 +18,11 @@
     "devDependencies": {
         "@finos/perspective-webpack-plugin": "^0.4.0",
         "css-loader": "^0.28.7",
-        "http-server": "^0.11.1",
-        "less-loader": "^4.0.5",
-        "npm-run-all": "^4.1.3",
-        "rimraf": "^2.5.2",
+        "file-loader": "^4.2.0",
+        "html-webpack-plugin": "^3.2.0",
         "style-loader": "^0.18.2",
-        "webpack": "^4.41.2",
-        "webpack-dev-server": "3.9.0"
+        "webpack": "^4.31.0",
+        "webpack-cli": "^3.3.7",
+        "webpack-dev-server": "^3.8.0"
     }
 }
diff --git a/examples/webpack/src/index.css b/examples/webpack/src/index.css
@@ -0,0 +1,16 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2018, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+ perspective-viewer { 
+   position: absolute; 
+   top: 0; 
+   left: 0; 
+   right: 0; 
+   bottom: 0; 
+  }
diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.js
@@ -0,0 +1,37 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2018, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+import perspective from "@finos/perspective";
+
+import "@finos/perspective-viewer";
+import "@finos/perspective-viewer-hypergrid";
+import "@finos/perspective-viewer-d3fc";
+
+import "@finos/perspective-viewer/dist/umd/material.css";
+
+import "./index.css";
+
+const worker = perspective.shared_worker();
+
+// superstore.arrow located in examples/simple/ and it's configured by
+// 'devServer' in 'webpack.config.js'
+const req = fetch("./superstore.arrow");
+
+window.addEventListener("load", async () => {
+    const viewer = document.createElement("perspective-viewer");
+    document.body.append(viewer);
+
+    const resp = await req;
+    const buffer = await resp.arrayBuffer();
+    const table = worker.table(buffer);
+
+    viewer.load(table);
+
+    window.viewer = viewer;
+});
diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js
@@ -8,49 +8,31 @@
  */
 
 const PerspectivePlugin = require("@finos/perspective-webpack-plugin");
+const HtmlWebPackPlugin = require("html-webpack-plugin");
 const path = require("path");
 
 module.exports = {
-    context: __dirname,
-    entry: "./index.js",
-    mode: "development",
+    mode: process.env.NODE_ENV || "development",
+    entry: "./src/index.js",
     output: {
-        filename: "public/bundle.js",
-        publicPath: "http://localhost:8080/",
-        path: path.resolve(__dirname, "./output")
+        filename: "index.js"
     },
     plugins: [
-        new PerspectivePlugin({
-            wasmLoaderOptions: {
-                name: "[hash].wasm"
-            },
-            workerLoaderOptions: {
-                name: "[hash].worker.[ext]"
-            }
-        })
+        new HtmlWebPackPlugin({
+            title: "Perspective Webpack Example"
+        }),
+        new PerspectivePlugin()
     ],
     module: {
         rules: [
-            {
-                test: /\.less$/,
-                exclude: [/packages/, /node_modules/],
-                use: [{loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader"}]
-            },
             {
                 test: /\.css$/,
-                exclude: [/packages/, /node_modules/],
                 use: [{loader: "style-loader"}, {loader: "css-loader"}]
             }
         ]
     },
-    devtool: "source-map",
     devServer: {
-        historyApiFallback: true,
-        watchOptions: {aggregateTimeout: 300, poll: 1000},
-        headers: {
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
-            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
-        }
-    }
+        contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "../simple")]
+    },
+    devtool: "source-map"
 };