Added dev and prod configs to webpack (#102)

Frontend/implementations/EpicGames/package.json

@@ -4,11 +4,15 @@
   "description": "",
   "main": "player.ts",
   "scripts": {
-    "build": "npx webpack",
+    "build": "npx webpack --config webpack.prod.js",
+    "build-dev": "npx webpack --config webpack.dev.js",
     "watch": "npx webpack --watch",
-    "serve": "webpack serve",
+    "serve": "webpack serve --config webpack.dev.js",
+    "serve-prod": "webpack serve --config webpack.prod.js",
     "install": "cd ../../library && npm run build-webpack && cd ../implementations/EpicGames && npm link ../../library",
-    "build-all": "npm run install && npm run build"
+    "install-dev": "cd ../../library && npm run build-webpack-dev && cd ../implementations/EpicGames && npm link ../../library",
+    "build-all": "npm run install && npm run build",
+    "build-all-dev": "npm run install-dev && npm run build-dev"
   },
   "devDependencies": {
     "webpack-cli": "^5.0.1",

Frontend/implementations/EpicGames/webpack.config.js → Frontend/implementations/EpicGames/webpack.common.js

@@ -1,85 +1,75 @@
-// Copyright Epic Games, Inc. All Rights Reserved.
-
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-const fs = require('fs');
-
-const pages = fs.readdirSync('./src', { withFileTypes: true })
-	.filter(item => !item.isDirectory())
-	.filter(item => path.parse(item.name).ext === '.html')
-	.map(htmlFile => path.parse(htmlFile.name).name);
-
-module.exports = (env) => {
-  return {
-    mode: 'development',
-    entry: pages.reduce((config, page) => {
-		config[page] = `./src/${page}.ts`;
-		return config;
-	}, {}),
-    plugins: [
-      new webpack.DefinePlugin({
-        WEBSOCKET_URL: JSON.stringify((env.WEBSOCKET_URL !== undefined) ? env.WEBSOCKET_URL : '')
-      }),
-    ].concat(pages.map((page) => new HtmlWebpackPlugin({
-    	title: 'Development',
-    	template: `./src/${page}.html`,
-    	filename: `${page}.html`,
-		chunks: [page],
-    }), )),
-    // turn off so we can see the source map for dom delegate so we can debug the library
-    devtool: 'inline-source-map',
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          loader: 'ts-loader',
-          exclude: [
-            /node_modules/,
-          ],
-        },
-        {
-          test: /\.html$/i,
-          use: 'html-loader'
-        },
-        {
-          test: /\.css$/,
-          type: 'asset/resource',
-          generator: {
-            filename: 'css/[name][ext]'
-          }
-        },
-        {
-          test: /\.(png|svg)$/i,
-          type: 'asset/resource',
-          generator: {
-            filename: 'images/[name][ext]'
-          }
-        },
-      ],
-    },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js', '.svg'],
-    },
-    output: {
-      filename: '[name].js',
-      library: 'frontend', // change this to something more meaningful
-      libraryTarget: 'umd',
-      path: path.resolve(__dirname, '../../../SignallingWebServer/Public'),
-      clean: true,
-      globalObject: 'this',
-      hashFunction: 'xxhash64',
-    },
-    experiments: {
-      futureDefaults: true
-    },
-    optimization: {
-      minimize: false
-    },
-    devServer: {
-    	static: {
-    		directory: path.join(__dirname, '../../../SignallingWebServer/Public'),
-    	},
-    }
-  };
-}
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const fs = require('fs');
+
+const pages = fs.readdirSync('./src', { withFileTypes: true })
+	.filter(item => !item.isDirectory())
+	.filter(item => path.parse(item.name).ext === '.html')
+	.map(htmlFile => path.parse(htmlFile.name).name);
+
+module.exports = {
+	entry: pages.reduce((config, page) => {
+		config[page] = `./src/${page}.ts`;
+		return config;
+	}, {}),
+
+    plugins: [].concat(pages.map((page) => new HtmlWebpackPlugin({
+          title: `${page}`,
+          template: `./src/${page}.html`,
+          filename: `${page}.html`,
+          chunks: [page],
+    }), )),
+
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: [
+            /node_modules/,
+          ],
+        },
+        {
+          test: /\.html$/i,
+          use: 'html-loader'
+        },
+        {
+          test: /\.css$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'css/[name][ext]'
+          }
+        },
+        {
+          test: /\.(png|svg)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'images/[name][ext]'
+          }
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.svg', '.json'],
+    },
+    output: {
+      filename: '[name].js',
+      library: 'epicgames-frontend',
+      libraryTarget: 'umd',
+      path: path.resolve(__dirname, '../../../SignallingWebServer/Public'),
+      clean: true,
+      globalObject: 'this',
+      hashFunction: 'xxhash64',
+    },
+    experiments: {
+      futureDefaults: true
+    },
+	devServer: {
+    	static: {
+    		directory: path.join(__dirname, '../../../SignallingWebServer/Public'),
+    	},
+    },
+}

Frontend/implementations/EpicGames/webpack.dev.js

@@ -0,0 +1,10 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+});

Frontend/implementations/EpicGames/webpack.prod.js

@@ -0,0 +1,16 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+    optimization: {
+      usedExports: true,
+      minimize: true
+    },
+    stats: 'errors-only',
+	performance: {
+		hints: false
+	}
+});

Frontend/library/package.json

@@ -2,12 +2,13 @@
     "name": "@epicgames-ps/lib-pixelstreamingfrontend-dev",
     "version": "0.0.1",
     "description": "Frontend library for Pixel Streaming",
-    "main": "dist/lib-pixelstreamingfrontend.min.js",
+    "main": "dist/lib-pixelstreamingfrontend.js",
     "types": "types/pixelstreamingfrontend.d.ts",
     "scripts": {
         "compile": "tsc --build --clean && tsc",
         "build": "npm run build-webpack",
-        "build-webpack": "npx webpack",
+        "build-webpack": "npx webpack --config webpack.prod.js",
+        "build-webpack-dev": "npx webpack --config webpack.dev.js",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
         "spellcheck": "cspell \"{README.md,.github/*.md,src/**/*.ts}\""
     },

Frontend/library/webpack.config.js → Frontend/library/webpack.common.js

@@ -5,11 +5,9 @@ const path = require('path');
 const webpack = require('webpack');
 
 module.exports = {
-    mode: 'development',
     entry: {
         index: './src/pixelstreamingfrontend.ts'
     },
-    devtool: 'inline-source-map',
     module: {
         rules: [
             {
@@ -28,15 +26,10 @@ module.exports = {
         })
     ],
     output: {
-        filename: 'lib-pixelstreamingfrontend.min.js',
         library: 'lib-pixelstreamingfrontend', // exposed variable that will provide access to the library classes
         libraryTarget: 'umd',
         path: path.resolve(__dirname, 'dist'),
-        clean: false,
+        clean: true,
         globalObject: 'this'
-    },
-    optimization: {
-        minimize: false
-    },
-    stats: 'errors-only'
+    }
 };

Frontend/library/webpack.dev.js

@@ -0,0 +1,15 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    devServer: {
+      static: './dist',
+    },
+    output: {
+        filename: 'lib-pixelstreamingfrontend.js',
+    }
+});

Frontend/library/webpack.prod.js

@@ -0,0 +1,16 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+    optimization: {
+      usedExports: true,
+      minimize: true
+    },
+    stats: 'errors-only',
+    output: {
+      filename: 'lib-pixelstreamingfrontend.js',
+    },
+});