From 419d3e8deb7649e6fd5c258fc1fd8511ff1f5bd5 Mon Sep 17 00:00:00 2001 From: Luke Bermingham Date: Fri, 17 Feb 2023 17:07:44 +1000 Subject: [PATCH] Added dev and prod configs to webpack --- .../implementations/EpicGames/package.json | 10 +- .../{webpack.config.js => webpack.common.js} | 160 ++++++++---------- .../implementations/EpicGames/webpack.dev.js | 10 ++ .../implementations/EpicGames/webpack.prod.js | 16 ++ Frontend/library/package.json | 5 +- .../{webpack.config.js => webpack.common.js} | 11 +- Frontend/library/webpack.dev.js | 15 ++ Frontend/library/webpack.prod.js | 16 ++ 8 files changed, 144 insertions(+), 99 deletions(-) rename Frontend/implementations/EpicGames/{webpack.config.js => webpack.common.js} (64%) create mode 100644 Frontend/implementations/EpicGames/webpack.dev.js create mode 100644 Frontend/implementations/EpicGames/webpack.prod.js rename Frontend/library/{webpack.config.js => webpack.common.js} (79%) create mode 100644 Frontend/library/webpack.dev.js create mode 100644 Frontend/library/webpack.prod.js diff --git a/Frontend/implementations/EpicGames/package.json b/Frontend/implementations/EpicGames/package.json index 9a240ce2..67407a76 100644 --- a/Frontend/implementations/EpicGames/package.json +++ b/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", diff --git a/Frontend/implementations/EpicGames/webpack.config.js b/Frontend/implementations/EpicGames/webpack.common.js similarity index 64% rename from Frontend/implementations/EpicGames/webpack.config.js rename to Frontend/implementations/EpicGames/webpack.common.js index cd91b659..642185af 100644 --- a/Frontend/implementations/EpicGames/webpack.config.js +++ b/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'), + }, + }, +} diff --git a/Frontend/implementations/EpicGames/webpack.dev.js b/Frontend/implementations/EpicGames/webpack.dev.js new file mode 100644 index 00000000..ee96e2fb --- /dev/null +++ b/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', +}); \ No newline at end of file diff --git a/Frontend/implementations/EpicGames/webpack.prod.js b/Frontend/implementations/EpicGames/webpack.prod.js new file mode 100644 index 00000000..bf27fe23 --- /dev/null +++ b/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 + } +}); \ No newline at end of file diff --git a/Frontend/library/package.json b/Frontend/library/package.json index 707374dc..2abf47b3 100644 --- a/Frontend/library/package.json +++ b/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}\"" }, diff --git a/Frontend/library/webpack.config.js b/Frontend/library/webpack.common.js similarity index 79% rename from Frontend/library/webpack.config.js rename to Frontend/library/webpack.common.js index c1f47034..aace7b9c 100644 --- a/Frontend/library/webpack.config.js +++ b/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' + } }; diff --git a/Frontend/library/webpack.dev.js b/Frontend/library/webpack.dev.js new file mode 100644 index 00000000..80a16541 --- /dev/null +++ b/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', + } +}); diff --git a/Frontend/library/webpack.prod.js b/Frontend/library/webpack.prod.js new file mode 100644 index 00000000..2bf13537 --- /dev/null +++ b/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', + }, +});