handle assets in pre-rendering

LeoMcA · akatsoulas · commit 785bcdabe1f4 · 2022-10-14T16:53:49.000+03:00
diff --git a/webpack.pre-render.js b/webpack.pre-render.js
@@ -1,8 +1,19 @@
+const { mergeWithRules } = require("webpack-merge");
 const path = require("path");
 const sveltePreprocess = require("svelte-preprocess");
 const SveltePreRenderPlugin = require("./webpack/svelte-pre-render-plugin");
 
-module.exports = {
+const common = require("./webpack.common.js");
+
+module.exports = mergeWithRules({
+  module: {
+    rules: {
+      test: "match",
+      type: "replace",
+      use: "replace",
+    },
+  },
+})(common, {
   entry: {
     contribute: "./svelte/contribute/Contribute",
   },
@@ -13,17 +24,10 @@ module.exports = {
         "/contribute/forum",
         "/contribute/kb",
         "/contribute/social",
-      ]
-    })
+      ],
+    }),
   ],
   mode: "production",
-  resolve: {
-    alias: {
-      svelte: path.resolve("node_modules", "svelte"),
-    },
-    extensions: [".mjs", ".js", ".svelte"],
-    mainFields: ["svelte", "browser", "module", "main"],
-  },
   module: {
     rules: [
       {
@@ -41,15 +45,14 @@ module.exports = {
         },
       },
       {
-        // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
-        test: /node_modules\/svelte\/.*\.mjs$/,
-        resolve: {
-          fullySpecified: false,
+        test: /\.(svg|png|gif|woff2?)$/,
+        type: "asset/source",
+        use: {
+          loader: path.resolve("./webpack/ssr-asset-loader"),
         },
       },
     ],
   },
-  devtool: "cheap-module-source-map",
   output: {
     filename: "[name].js",
     path: path.resolve(__dirname, "dist/pre-render"),
@@ -58,4 +61,4 @@ module.exports = {
     },
   },
   target: "node",
-};
+});
diff --git a/webpack/ssr-asset-loader.js b/webpack/ssr-asset-loader.js
@@ -0,0 +1,15 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = function (source) {
+  const assetMap = JSON.parse(
+    fs.readFileSync(
+      path.join(__dirname, "../dist/source-to-asset.json"),
+      "utf-8"
+    )
+  );
+  return (
+    "{{ STATIC_URL_WEBPACK }}/" +
+      assetMap[this.resourcePath.replace(path.join(__dirname, "../"), "")] || ""
+  );
+};
