Sharing code between scripts for reduced bundle size.

1 files changed, 64 insertions, 24 deletions

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 31d838e..baadc51 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require("path");
+const fs = require("fs");
 const CopyPlugin = require("copy-webpack-plugin");
 
 global.ROOT_DIR = path.resolve(__dirname, "..");
@@ -13,57 +14,96 @@ const InjectScriptPlugin = webpackRequire("plugins/inject-script-webpack-plugin"
 const { inlineJavascript } = webpackRequire("utils/inline-javascript");
 const { getScriptRuntimeFromType } = webpackRequire("utils/script-runtime");
 const { getFileNameHash } = webpackRequire("utils/file-name-hash");
-const { formatScripts } = webpackRequire("utils/format-scripts");
 
-const scripts = formatScripts(require(path.resolve(SOURCE_DIR, "scripts.json")));
+const scripts = webpackRequire("utils/scripts");
 
-const entries = {};
+const sharedModules = webpackRequire("utils/shared-modules");
+
+const uninjectedScriptEntries = {};
+const injectedScriptEntries = {};
+const sharedModuleEntries = {};
+const sharedModuleExternals = {};
 
 for (const scriptPath in scripts) {
 	for (const scriptType in scripts[scriptPath]) {
 		const currentScripts = scripts[scriptPath][scriptType];
-		entries[`${scriptType} - "${scriptPath}"`] = {
+		const scriptEntries = scriptType.startsWith("injected") ? injectedScriptEntries : uninjectedScriptEntries;
+
+		scriptEntries[`${scriptType} - "${scriptPath}"`] = {
 			import: inlineJavascript(currentScripts.map(script => `import "${path.resolve(SOURCE_DIR, "scripts", script)}";`).join("\n")),
 			filename: `scripts/${getFileNameHash(scriptPath)}-${scriptType}.js`
 		};
 	}
 }
 
-module.exports = {
-	entry: entries,
+for (const sharedModule of sharedModules) {
+	sharedModuleEntries[sharedModule] = {
+		import: path.resolve(SOURCE_DIR, "shared", sharedModule),
+		filename: `shared/${sharedModule}.js`,
+		library: {
+			type: "module"
+		}
+	};
+	sharedModuleExternals[`/shared/${sharedModule}`] = `/shared/${sharedModule}.js`;
+}
+
+const common = {
 	mode: "production",
 	resolve: {
-		extensions: ["", ".ts", ".js"],
+		extensions: [".ts", ".js"],
 		alias: {
-			"@": global.SOURCE_DIR
+			"/shared": path.resolve(global.SOURCE_DIR, "shared")
 		}
 	},
 	module: {
 		rules: [
 			{
-				test: /\.tsx?$/,
+				test: /\.ts$/,
 				loader: "ts-loader",
 				options: {
 					configFile: "config/tsconfig.json"
 				}
-			},
-			{
-				test: /\.(jpg|png|gif)$/,
-				loader: "url-loader"
 			}
 		]
 	},
 	optimization: {
 		minimize: process.env.NODE_ENV === "production"
-	},
-	plugins: [
-		new InjectScriptPlugin(),
-		new CopyPlugin({
-			patterns: [{
-				from: path.resolve(ROOT_DIR, "static"),
-				to: "./"
-			}]
-		}),
-		new CreateManifestPlugin()
-	]
+	}
 };
+
+module.exports = [
+	{
+		...common,
+		experiments: {
+			outputModule: true,
+			topLevelAwait: true
+		},
+		externals: sharedModuleExternals,
+		entry: uninjectedScriptEntries,
+		plugins: [
+			new CopyPlugin({
+				patterns: [{
+					from: path.resolve(ROOT_DIR, "static"),
+					to: "./"
+				}]
+			}),
+			new CreateManifestPlugin()
+		]
+	},
+	{
+		...common,
+		entry: injectedScriptEntries,
+		plugins: [
+			new InjectScriptPlugin(),
+		]
+	},
+	{
+		...common,
+		externals: sharedModuleExternals,
+		experiments: {
+			outputModule: true,
+			topLevelAwait: true
+		},
+		entry: sharedModuleEntries
+	}
+];