Maintenance: This commit updates to webpack v5 and esbuild. I'm still testing it, but I think this'll work.

.eslintrc.js

@@ -13,8 +13,8 @@ module.exports = {
 		'react'
 	],
 	'parserOptions': {
-		'parser': '@babel/eslint-parser',
+		//'parser': '@babel/eslint-parser',
-		'ecmaVersion': 8,
+		'ecmaVersion': 'latest',
 		'sourceType': 'module',
 		'ecmaFeatures': {
 			'jsx': true

jsconfig.json

@@ -8,7 +8,7 @@
 			"es6",
 			"es2017"
 		],
-		"target": "es2017",
+		"target": "esnext",
 		"module": "es6",
 		"baseUrl": ".",
 		"paths": {

package.json

@@ -6,55 +6,46 @@
   "private": true,
   "license": "Apache-2.0",
   "scripts": {
-    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --config webpack.web.dev.js",
+    "start": "pnpm dev",
     "eslint": "eslint \"src/**/*.{js,jsx,vue}\"",
     "clean": "rimraf dist",
-    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --config webpack.web.dev.js",
+    "dev": "cross-env NODE_ENV=development webpack serve",
-    "dev:prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --config webpack.web.dev.prod.js",
+    "dev:prod": "cross-env NODE_ENV=production webpack serve",
     "build": "pnpm build:prod",
-    "build:stats": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack.web.prod.js --json > stats.json",
+    "build:stats": "cross-env NODE_ENV=production webpack build --json > stats.json",
-    "build:prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack.web.prod.js",
+    "build:prod": "cross-env NODE_ENV=production webpack build",
-    "build:dev": "pnpm clean && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config webpack.web.dev.js",
+    "build:dev": "cross-env NODE_ENV=development webpack build",
     "font": "pnpm font:edit",
     "font:edit": "fontello-cli --cli-config fontello.client.json edit",
     "font:save": "fontello-cli --cli-config fontello.client.json save && pnpm font:update",
     "font:update": "node bin/update_fonts"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.16.0",
     "@ffz/fontello-cli": "^1.0.4",
-    "@webpack-cli/serve": "^1.6.0",
+    "browserslist": "^4.21.10",
-    "babel-loader": "^8.2.3",
+    "copy-webpack-plugin": "^11.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^6.8.1",
-    "eslint": "^7.32.0",
+    "esbuild-loader": "^4.0.2",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint": "^8.48.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-import": "^2.28.1",
-    "extract-loader": "^2.0.1",
+    "eslint-plugin-react": "^7.33.2",
-    "file-loader": "^4.3.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
     "json-loader": "^0.5.7",
-    "raw-loader": "^3.1.0",
+    "minify-graphql-loader": "^1.0.2",
-    "rimraf": "^3.0.2",
+    "raw-loader": "^4.0.2",
-    "sass": "^1.43.4",
+    "rimraf": "^5.0.1",
-    "sass-loader": "^7.3.1",
+    "sass": "^1.66.1",
-    "semver": "^7.3.5",
+    "sass-loader": "^13.3.2",
-    "terser-webpack-plugin": "4",
+    "semver": "^7.5.4",
-    "vue-loader": "^15.9.8",
+    "vue-loader": "^15.10.2",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^4.46.0",
+    "webpack": "^5.88.2",
-    "webpack-cli": "^4.9.1",
+    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.4.0",
+    "webpack-dev-server": "^4.15.1",
-    "webpack-manifest-plugin": "^4.0.2",
+    "webpack-manifest-plugin": "^5.0.0"
-    "webpack-merge": "^4.2.2"
   },
   "repository": {
     "type": "git",

src/bridge.js

@@ -208,16 +208,17 @@ class FFZBridge extends Module {
 
 FFZBridge.Logger = Logger;
 
-const VER = FFZBridge.version_info = {
+const VER = FrankerFaceZ.version_info = Object.freeze({
 	major: __version_major__,
 	minor: __version_minor__,
 	revision: __version_patch__,
 	extra: __version_prerelease__?.length && __version_prerelease__[0],
 	commit: __git_commit__,
-	build: __webpack_hash__,
+	build: __version_build__,
+	hash: __webpack_hash__,
 	toString: () =>
-		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
+		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
-}
+});
 
 window.FFZBridge = FFZBridge;
 window.ffz_bridge = new FFZBridge();

src/clips.js

@@ -125,16 +125,17 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`).join('\n\n'
 
 FrankerFaceZ.Logger = Logger;
 
-const VER = FrankerFaceZ.version_info = {
+const VER = FrankerFaceZ.version_info = Object.freeze({
 	major: __version_major__,
 	minor: __version_minor__,
 	revision: __version_patch__,
 	extra: __version_prerelease__?.length && __version_prerelease__[0],
 	commit: __git_commit__,
-	build: __webpack_hash__,
+	build: __version_build__,
+	hash: __webpack_hash__,
 	toString: () =>
-		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
+		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
-}
+});
 
 // We don't support addons in the player right now, so
 FrankerFaceZ.utilities = {

src/entry_ext.js

@@ -6,7 +6,7 @@
 		return;
 
 	const HOST = location.hostname,
-		SERVER = __EXTENSION_PATH__,
+		SERVER = browser.runtime.getURL("web/"),
 		script = document.createElement('script');
 
 	let FLAVOR =
@@ -21,5 +21,6 @@
 	script.async = true;
 	script.crossOrigin = 'anonymous';
 	script.src = `${SERVER}/${FLAVOR}.js?_=${Date.now()}`;
+	script.dataset.path = SERVER;
 	document.head.appendChild(script);
 })();

src/main.js

@@ -160,16 +160,17 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`).join('\n\n'
 
 FrankerFaceZ.Logger = Logger;
 
-const VER = FrankerFaceZ.version_info = {
+const VER = FrankerFaceZ.version_info = Object.freeze({
 	major: __version_major__,
 	minor: __version_minor__,
 	revision: __version_patch__,
 	extra: __version_prerelease__?.length && __version_prerelease__[0],
 	commit: __git_commit__,
-	build: __webpack_hash__,
+	build: __version_build__,
+	hash: __webpack_hash__,
 	toString: () =>
-		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
+		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
-}
+});
 
 
 FrankerFaceZ.utilities = {

src/modules/main_menu/components/main-menu.vue

@@ -98,7 +98,7 @@
 							{{ version.commit.slice(0,7) }}
 						</a>
 						<span v-else>
-							{{ version.build }}
+							{{ version.hash }}
 						</span>
 					</div>
 				</footer>

src/player.js

@@ -119,16 +119,17 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`).join('\n\n'
 
 FrankerFaceZ.Logger = Logger;
 
-const VER = FrankerFaceZ.version_info = {
+const VER = FrankerFaceZ.version_info = Object.freeze({
 	major: __version_major__,
 	minor: __version_minor__,
 	revision: __version_patch__,
 	extra: __version_prerelease__?.length && __version_prerelease__[0],
 	commit: __git_commit__,
-	build: __webpack_hash__,
+	build: __version_build__,
+	hash: __webpack_hash__,
 	toString: () =>
-		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
+		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
-}
+});
 
 // We don't support addons in the player right now, so a few
 // of these are unavailable.

src/sites/clips/index.jsx

@@ -40,7 +40,7 @@ export default class ClipsSite extends BaseSite {
 		this.inject('css_tweaks', CSSTweaks);
 
 		this.css_tweaks.loader = require.context(
-			'!raw-loader!sass-loader!./css_tweaks', false, /\.s?css$/, 'lazy-once'
+			'./css_tweaks?css_tweaks', false, /\.s?css$/, 'lazy-once'
 		);
 
 		this.css_tweaks.rules = {

src/sites/player/index.jsx

@@ -30,7 +30,7 @@ export default class PlayerSite extends BaseSite {
 		this.inject('css_tweaks', CSSTweaks);
 
 		this.css_tweaks.loader = require.context(
-			'!raw-loader!sass-loader!./css_tweaks', false, /\.s?css$/, 'lazy-once'
+			'./css_tweaks?css_tweaks', false, /\.s?css$/, 'lazy-once'
 		);
 
 		this.css_tweaks.rules = {

src/sites/twitch-twilight/index.js

@@ -21,6 +21,8 @@ import {has} from 'utilities/object';
 
 import MAIN_URL from 'site/styles/main.scss';
 
+console.log('!!!!!!!! MAIN_URL: !!!!!!!!!', MAIN_URL);
+
 
 // ============================================================================
 // The Site

src/sites/twitch-twilight/modules/css_tweaks/styles.js

@@ -1,3 +1,3 @@
 'use strict';
 
-export default require.context('!raw-loader!sass-loader!./styles', false, /\.s?css$/);
+export default require.context('./styles?css_tweaks', false, /\.s?css$/);

webpack.common.js

@@ -1,155 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const semver = require('semver');
-
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-
-/* global process module __dirname */
-
-const VERSION = semver.parse(require('./package.json').version);
-const PRODUCTION = process.env.NODE_ENV === 'production';
-const FOR_EXTENSION = !! process.env.FFZ_EXTENSION;
-
-const ENTRY_POINTS = {
-	bridge: './src/bridge.js',
-	player: './src/player.js',
-	avalon: './src/main.js',
-	clips: './src/clips.js'
-};
-
-module.exports = {
-	entry: ENTRY_POINTS,
-	resolve: {
-		extensions: ['.js', '.jsx'],
-		alias: {
-			res: path.resolve(__dirname, 'res/'),
-			styles: path.resolve(__dirname, 'styles/'),
-			root: __dirname,
-			src: path.resolve(__dirname, 'src/'),
-			utilities: path.resolve(__dirname, 'src/utilities/')
-		}
-	},
-	externals: [
-		function(context, request, callback) {
-			if ( request === 'vue' && ! /utilities/.test(context) )
-				return callback(null, 'root ffzVue');
-			callback();
-		}
-	],
-	output: {
-		chunkFilename: FOR_EXTENSION
-			? '[name].js'
-			: '[name].[chunkhash].js',
-		path: path.resolve(__dirname, 'dist'),
-		jsonpFunction: 'ffzWebpackJsonp',
-		crossOriginLoading: 'anonymous'
-	},
-	optimization: {
-		splitChunks: {
-			chunks(chunk) {
-				return ! Object.keys(ENTRY_POINTS).includes(chunk.name);
-			},
-			cacheGroups: {
-				vendors: false
-			}
-		}
-	},
-	plugins: [
-		new VueLoaderPlugin(),
-		new webpack.ExtendedAPIPlugin(),
-		new webpack.DefinePlugin({
-			__version_major__: VERSION.major,
-			__version_minor__: VERSION.minor,
-			__version_patch__: VERSION.patch,
-			__version_prerelease__: VERSION.prerelease,
-			__extension__: FOR_EXTENSION
-				? JSON.stringify(process.env.FFZ_EXTENSION)
-				: false
-		}),
-	],
-	module: {
-		rules: [{
-			test: /\.s?css$/,
-			use: [{
-				loader: 'file-loader',
-				options: {
-					name: (! FOR_EXTENSION && PRODUCTION)
-						? '[name].[hash].css'
-						: '[name].css'
-				}
-			}, {
-				loader: 'extract-loader'
-			}, {
-				loader: 'css-loader',
-				options: {
-					sourceMap: true
-				}
-			}, {
-				loader: 'sass-loader',
-				options: {
-					sourceMap: true
-				}
-			}]
-		},
-		{
-			test: /\.json$/,
-			include: /src/,
-			type: 'javascript/auto',
-			loader: 'file-loader',
-			options: {
-				name: (! FOR_EXTENSION && PRODUCTION)
-					? '[name].[hash].json'
-					: '[name].json'
-			}
-		},
-		{
-			test: /\.js$/,
-			exclude: /node_modules/,
-			loader: 'babel-loader',
-			options: {
-				cacheDirectory: true
-			}
-		},
-		{
-			test: /\.jsx$/,
-			exclude: /node_modules/,
-			loader: 'babel-loader',
-			options: {
-				cacheDirectory: true,
-				plugins: [
-					['@babel/plugin-transform-react-jsx', {
-						pragma: 'createElement'
-					}]
-				]
-			}
-		},
-		{
-			test: /\.(graphql|gql)$/,
-			exclude: /node_modules/,
-			loader: 'graphql-tag/loader'
-		},
-		{
-			test: /\.(?:otf|eot|ttf|woff|woff2)$/,
-			use: [{
-				loader: 'file-loader',
-				options: {
-					name: (! FOR_EXTENSION && PRODUCTION)
-						? '[name].[hash].[ext]'
-						: '[name].[ext]'
-				}
-			}]
-		},
-		{
-			test: /\.md$/,
-			loader: 'raw-loader'
-		},
-		{
-			test: /\.svg$/,
-			loader: 'raw-loader'
-		},
-		{
-			test: /\.vue$/,
-			loader: 'vue-loader'
-		}]
-	}
-}

webpack.config.js

@@ -0,0 +1,339 @@
+/* global module __dirname */
+
+const path = require('path');
+const semver = require('semver');
+const {exec, execSync} = require('child_process');
+
+const { VueLoaderPlugin } = require('vue-loader');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const { EsbuildPlugin } = require('esbuild-loader');
+const CopyPlugin = require('copy-webpack-plugin');
+
+
+if ( process.env.NODE_ENV == null )
+	process.env.NODE_ENV = 'production';
+
+// Are we in development?
+const DEV_SERVER = process.env.WEBPACK_SERVE == 'true';
+const DEV_BUILD = process.env.NODE_ENV !== 'production';
+
+// Is this for an extension?
+const FOR_EXTENSION = !! process.env.FFZ_EXTENSION;
+
+// Get the public path.
+const FILE_PATH = DEV_SERVER
+	? 'https://localhost:8000/script/'
+	: FOR_EXTENSION
+		? ''
+		: 'https://cdn.frankerfacez.com/static/';
+
+
+console.log('NODE_ENV:', process.env.NODE_ENV);
+console.log('FOR_EXTENSION:', FOR_EXTENSION, FOR_EXTENSION ? ` (${process.env.FFZ_EXTENSION})` : '');
+console.log('IS_DEV_BUILD:', DEV_BUILD);
+console.log('IS SERVE:', DEV_SERVER);
+console.log('FILE PATH:', FILE_PATH);
+
+
+// Version Stuff
+const VERSION = semver.parse(require('./package.json').version);
+const commit_hash = DEV_SERVER
+	? null
+	: execSync('git rev-parse HEAD').toString().trim();
+
+
+// The Config
+
+const ENTRY_POINTS = {
+	bridge: './src/bridge.js',
+	player: './src/player.js',
+	avalon: './src/main.js',
+	clips: './src/clips.js'
+};
+
+const TARGET = 'es2020';
+
+/** @type {import('webpack').Configuration} */
+const config = {
+	mode: DEV_BUILD
+		? 'development'
+		: 'production',
+	devtool: DEV_BUILD
+		? 'inline-source-map'
+		: 'source-map',
+
+	target: ['web', TARGET],
+
+	resolve: {
+		extensions: ['.js', '.jsx'],
+		alias: {
+			res: path.resolve(__dirname, 'res/'),
+			styles: path.resolve(__dirname, 'styles/'),
+			root: __dirname,
+			src: path.resolve(__dirname, 'src/'),
+			utilities: path.resolve(__dirname, 'src/utilities/'),
+			site: path.resolve(__dirname, 'src/sites/twitch-twilight/')
+		}
+	},
+
+	entry: ENTRY_POINTS,
+
+	externals: [
+		({context, request}, callback) => {
+			if ( request === 'vue' && ! /utilities/.test(context) )
+				return callback(null, 'root ffzVue');
+
+			callback();
+		}
+	],
+
+	output: {
+		chunkFormat: 'array-push',
+		clean: true,
+		publicPath: true
+			? 'auto'
+			: FILE_PATH,
+		path: path.resolve(__dirname, 'dist'),
+		filename: (FOR_EXTENSION || DEV_SERVER)
+			? '[name].js'
+			: '[name].[contenthash:8].js',
+		chunkLoadingGlobal: 'ffzWebpackJsonp',
+		crossOriginLoading: 'anonymous'
+	},
+
+	optimization: {
+		minimizer: [
+			new EsbuildPlugin({
+				target: TARGET,
+				keepNames: true
+			})
+		],
+		splitChunks: {
+			chunks(chunk) {
+				return ! Object.keys(ENTRY_POINTS).includes(chunk.name);
+			},
+			cacheGroups: {
+				vendors: false
+			}
+		}
+	},
+
+	plugins: [
+		new CopyPlugin({
+			patterns: [
+				{
+					from: './src/entry.js',
+					to: 'script.js'
+				}
+			]
+		}),
+		new VueLoaderPlugin(),
+		new EsbuildPlugin({
+			define: {
+				__version_major__: JSON.stringify(VERSION.major),
+				__version_minor__: JSON.stringify(VERSION.minor),
+				__version_patch__: JSON.stringify(VERSION.patch),
+				__version_prerelease__: JSON.stringify(VERSION.prerelease),
+				__version_build__: JSON.stringify(process.env.FFZ_BUILD || null),
+				__git_commit__: JSON.stringify(commit_hash),
+				__extension__: FOR_EXTENSION
+					? JSON.stringify(process.env.FFZ_EXTENSION)
+					: JSON.stringify(false)
+			}
+		}),
+		new WebpackManifestPlugin({
+
+		})
+	],
+
+	module: {
+		rules: [
+			{
+				test: /\.jsx?$/,
+				exclude: /node_modules/,
+				loader: 'esbuild-loader',
+				options: {
+					loader: 'jsx',
+					jsxFactory: 'createElement',
+					target: TARGET
+				}
+			},
+			{
+				test: /\.(graphql|gql)$/,
+				exclude: /node_modules/,
+				use: [
+					'graphql-tag/loader',
+					'minify-graphql-loader'
+				]
+			},
+			{
+				test: /\.json$/,
+				include: /src/,
+				type: 'asset/resource',
+				generator: {
+					filename: '[name].[contenthash:8].json'
+				}
+			},
+			{
+				test: /\.(?:otf|eot|ttf|woff|woff2)$/,
+				use: [{
+					loader: 'file-loader',
+					options: {
+						name: (FOR_EXTENSION || DEV_BUILD)
+							? '[name].[ext]'
+							: '[name].[contenthash:8].[ext]'
+					}
+				}]
+			},
+			{
+				test: /\.md$/,
+				type: 'asset/source',
+			},
+			{
+				test: /\.svg$/,
+				type: 'asset/source'
+			},
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader'
+			},
+			{
+				test: /\.(?:sa|sc|c)ss$/,
+				resourceQuery: {
+					not: [
+						/css_tweaks/
+					]
+				},
+				use: [
+					{
+						loader: 'file-loader',
+						options: {
+							name: (FOR_EXTENSION || DEV_BUILD)
+								? '[name].css'
+								: '[name].[contenthash:8].css'
+						}
+					},
+					{
+						loader: 'extract-loader',
+						options: {
+							publicPath: ''
+						}
+					},
+					{
+						loader: 'css-loader',
+						options: {
+							esModule: false,
+							sourceMap: DEV_BUILD ? true : false
+						}
+					},
+					{
+						loader: 'sass-loader',
+						options: {
+							sourceMap: true
+						}
+					}
+				]
+			},
+			{
+				test: /\.(?:sa|sc|c)ss$/,
+				resourceQuery: /css_tweaks/,
+				use: [
+					{
+						loader: 'raw-loader'
+					},
+					{
+						loader: 'extract-loader'
+					},
+					{
+						loader: 'css-loader',
+						options: {
+							esModule: false,
+							sourceMap: DEV_BUILD ? true : false
+						}
+					},
+					{
+						loader: 'sass-loader',
+						options: {
+							sourceMap: false
+						}
+					}
+				]
+			}
+		]
+	}
+
+};
+
+if ( DEV_SERVER )
+	config.devServer = {
+		client: false,
+		webSocketServer: false,
+		magicHtml: false,
+		liveReload: false,
+		hot: false,
+
+		server: 'https',
+		port: 8000,
+		compress: true,
+
+		allowedHosts: [
+			'.twitch.tv',
+			'.frankerfacez.com'
+		],
+
+		static: {
+			directory: path.join(__dirname, 'dev_cdn'),
+		},
+
+		devMiddleware: {
+			publicPath: '/script/',
+		},
+
+		proxy: {
+			'**': {
+				target: 'https://cdn.frankerfacez.com/',
+				changeOrigin: true
+			}
+		},
+
+		setupMiddlewares: (middlewares, devServer) => {
+
+			devServer.app.get('/update_font', (req, res) => {
+				const proc = exec('npm run font:save');
+
+				proc.stdout.on('data', data => {
+					console.log('FONT>>', data);
+				});
+
+				proc.stderr.on('data', data => {
+					console.error('FONT>>', data);
+				});
+
+				proc.on('close', code => {
+					console.log('FONT>> Exited with code', code);
+					res.redirect(req.headers.referer);
+				});
+			});
+
+			devServer.app.get('/dev_server', (req, res) => {
+				res.setHeader('Access-Control-Allow-Origin', '*');
+				res.setHeader('Access-Control-Allow-Private-Network', 'true');
+
+				res.json({
+					path: process.cwd(),
+					version: 2
+				})
+			});
+
+			middlewares.unshift((req, res, next) => {
+				res.setHeader('Access-Control-Allow-Origin', '*');
+				res.setHeader('Access-Control-Allow-Private-Network', 'true');
+				next();
+			});
+
+			return middlewares;
+		}
+	};
+
+
+module.exports = config;

webpack.web.common.js

@@ -1,13 +0,0 @@
-const path = require('path');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-/* global module __dirname */
-
-module.exports = merge(common, {
-	resolve: {
-		alias: {
-			site: path.resolve(__dirname, 'src/sites/twitch-twilight/')
-		}
-	}
-});

webpack.web.dev.js

@@ -1,101 +0,0 @@
-/* eslint-disable */
-const path = require('path');
-const merge = require('webpack-merge');
-const common = require('./webpack.web.common.js');
-
-const {exec} = require('child_process');
-
-const CopyPlugin = require('copy-webpack-plugin');
-const webpack = require('webpack');
-
-/* global module */
-
-module.exports = merge(common, {
-	mode: 'development',
-	devtool: 'inline-source-map',
-
-	plugins: [
-		new CopyPlugin([
-			{
-				from: './src/entry.js',
-				to: 'script.js'
-			}
-		]),
-		new webpack.DefinePlugin({
-			__git_commit__: null
-		})
-	],
-
-	devServer: {
-		client: false,
-		webSocketServer: false,
-
-		magicHtml: false,
-		liveReload: false,
-		hot: false,
-		https: true,
-		port: 8000,
-		compress: true,
-
-		allowedHosts: [
-			'.twitch.tv',
-			'.frankerfacez.com'
-		],
-
-		static: {
-			directory: path.join(__dirname, 'dev_cdn'),
-		},
-
-		devMiddleware: {
-			publicPath: '/script/',
-		},
-
-		proxy: {
-			'**': {
-				target: 'https://cdn.frankerfacez.com/',
-				changeOrigin: true
-			}
-		},
-
-		onBeforeSetupMiddleware(devServer) {
-			const app = devServer.app;
-
-			// Because the headers config option is broken.
-			app.get('/*', (req, res, next) => {
-				res.setHeader('Access-Control-Allow-Origin', '*');
-				next();
-			});
-
-			app.get('/update_font', (req, res) => {
-				const proc = exec('npm run font:save');
-
-				proc.stdout.on('data', data => {
-					console.log('FONT>>', data);
-				});
-
-				proc.stderr.on('data', data => {
-					console.error('FONT>>', data);
-				});
-
-				proc.on('close', code => {
-					console.log('FONT>> Exited with code', code);
-					res.redirect(req.headers.referer);
-				});
-			});
-
-			app.get('/dev_server', (req, res) => {
-				res.json({
-					path: process.cwd(),
-					version: 2
-				})
-			});
-		}
-	},
-
-	output: {
-		publicPath: '//localhost:8000/script/',
-		filename: '[name].js',
-		jsonpFunction: 'ffzWebpackJsonp',
-		crossOriginLoading: 'anonymous'
-	}
-})

webpack.web.dev.prod.js

@@ -1,91 +0,0 @@
-/* eslint-disable */
-const path = require('path');
-const merge = require('webpack-merge');
-const prod = require('./webpack.web.prod.js');
-
-const CopyPlugin = require('copy-webpack-plugin');
-const webpack = require('webpack');
-
-/* global module */
-
-module.exports = merge(prod, {
-	plugins: [
-		new CopyPlugin([
-			{
-				from: './src/entry.js',
-				to: 'script.js'
-			}
-		]),
-		new webpack.DefinePlugin({
-			__git_commit__: null
-		})
-	],
-
-	devServer: {
-		hot: false,
-		https: true,
-		port: 8000,
-		compress: true,
-
-		allowedHosts: [
-			'.twitch.tv',
-			'.frankerfacez.com'
-		],
-
-		static: {
-			directory: path.join(__dirname, 'dev_cdn'),
-		},
-
-		devMiddleware: {
-			publicPath: '/script/',
-		},
-
-		proxy: {
-			'**': {
-				target: 'https://cdn.frankerfacez.com/',
-				changeOrigin: true
-			}
-		},
-
-		onBeforeSetupMiddleware(devServer) {
-			const app = devServer.app;
-
-			// Because the headers config option is broken.
-			app.get('/*', (req, res, next) => {
-				res.setHeader('Access-Control-Allow-Origin', '*');
-				next();
-			});
-
-			app.get('/update_font', (req, res) => {
-				const proc = exec('npm run font:save');
-
-				proc.stdout.on('data', data => {
-					console.log('FONT>>', data);
-				});
-
-				proc.stderr.on('data', data => {
-					console.error('FONT>>', data);
-				});
-
-				proc.on('close', code => {
-					console.log('FONT>> Exited with code', code);
-					res.redirect(req.headers.referer);
-				});
-			});
-
-			app.get('/dev_server', (req, res) => {
-				res.json({
-					path: process.cwd(),
-					version: 2
-				})
-			});
-		}
-	},
-
-	output: {
-		publicPath: '//localhost:8000/script/',
-		filename: '[name].js',
-		jsonpFunction: 'ffzWebpackJsonp',
-		crossOriginLoading: 'anonymous'
-	}
-})

webpack.web.prod.js

@@ -1,77 +0,0 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.web.common.js');
-
-const CopyPlugin = require('copy-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
-
-const Terser = require('terser');
-
-// Get Git info
-
-const commit_hash = require('child_process').execSync('git rev-parse HEAD').toString().trim();
-const FOR_EXTENSION = !! process.env.FFZ_EXTENSION;
-
-/* global module Buffer */
-
-const minifier = content => {
-	let text = content.toString('utf8');
-	if ( FOR_EXTENSION )
-		text = text.replace('__EXTENSION_PATH__', JSON.stringify(process.env.FFZ_EXTENSION));
-	const minified = Terser.minify(text);
-	return (minified && minified.code) ? Buffer.from(minified.code) : Buffer.from(text);
-};
-
-module.exports = merge(common, {
-	mode: 'production',
-	devtool: 'source-map',
-
-	optimization: {
-		concatenateModules: false,
-		minimizer: [
-			new TerserPlugin({
-				sourceMap: true,
-				terserOptions: {
-					keep_classnames: true,
-					keep_fnames: true
-				}
-			})
-		]
-	},
-
-	plugins: [
-		new CleanWebpackPlugin(),
-		new webpack.DefinePlugin({
-			__git_commit__: JSON.stringify(commit_hash)
-		}),
-		new CopyPlugin([
-			{
-				from: FOR_EXTENSION
-					? './src/entry_ext.js'
-					: './src/entry.js',
-				to: 'script.min.js',
-				transform: minifier
-			}
-		]),
-		new WebpackManifestPlugin({
-			publicPath: '',
-			map: data => {
-				if ( data.name.endsWith('.scss') )
-					data.name = `${data.name.substr(0,data.name.length - 5)}.css`;
-
-				return data;
-			}
-		})
-	],
-
-	output: {
-		publicPath: FOR_EXTENSION
-			? process.env.FFZ_EXTENSION
-			: '//cdn.frankerfacez.com/static/',
-		filename: FOR_EXTENSION
-			? '[name].js'
-			: '[name].[hash].js'
-	}
-});