Separate out Scratch specific webpack configuration

zetter-rpf · zetter-rpf · commit e3350144bf71 · 2026-04-08T10:14:05.000+01:00
Our webpack config has grown to support our new scratch entry file. I've separated out the Scratch specific config needed for this entrypoint.

As part of this I have also made sure the code from the scratch-gui is kept in a separate file from our code and not modified as part of our build process so we are better following the requirements of the Scratch license. Because Scratch has peer dependencies (react, react-dom, redux, redux-react) I've had to configure these as external dependencies and  set them on window in the way that Scratch expects. These dependencies will load first, then Scratch and then our compiled scratch.jsx.
diff --git a/src/scratch.html b/src/scratch.html
@@ -54,5 +54,17 @@
   <body>
     <div id="scratch-loading">loading</div>
     <div id="app"></div>
+
+    <script src="<%= publicUrl %>vendor/react.production.min.js"></script>
+    <script src="<%= publicUrl %>vendor/react-dom.production.min.js"></script>
+    <script src="<%= publicUrl %>vendor/redux.min.js"></script>
+    <script src="<%= publicUrl %>vendor/react-redux.min.js"></script>
+    <script>
+      window.react = window.React;
+      window["react-dom"] = window.ReactDOM;
+      window.redux = window.Redux;
+      window["react-redux"] = window.ReactRedux;
+    </script>
+    <script src="<%= publicUrl %>vendor/scratch-gui.js"></script>
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -101,10 +101,9 @@ const moduleRules = [
   },
 ];
 
-module.exports = {
+const mainConfig = {
   entry: {
     "web-component": path.resolve(__dirname, "./src/web-component.js"),
-    scratch: path.resolve(__dirname, "./src/scratch.jsx"),
     PyodideWorker: path.resolve(__dirname, "./src/PyodideWorker.js"),
   },
   module: { rules: moduleRules },
@@ -185,21 +184,87 @@ module.exports = {
       filename: "web-component.html",
       chunks: ["web-component"],
     }),
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: "public", to: "" },
+        { from: "src/projects", to: "projects" },
+      ],
+    }),
+  ],
+  stats: "minimal",
+};
+
+const scratchConfig = {
+  entry: {
+    scratch: path.resolve(__dirname, "./src/scratch.jsx"),
+  },
+  module: { rules: moduleRules },
+  resolve: {
+    extensions: [".*", ".js", ".jsx", ".css"],
+  },
+  output: {
+    path: path.resolve(__dirname, "./build"),
+    filename: "[name].js",
+    publicPath: publicUrl,
+  },
+  externals: [
+    function ({ request }, callback) {
+      if (request === "@scratch/scratch-gui") return callback(null, "GUI");
+      if (request === "react") return callback(null, "React");
+      if (request === "react-dom" || request.startsWith("react-dom/"))
+        return callback(null, "ReactDOM");
+      if (request === "redux") return callback(null, "Redux");
+      if (request === "react-redux") return callback(null, "ReactRedux");
+      callback();
+    },
+  ],
+  plugins: [
+    new Dotenv({
+      path: "./.env",
+      systemvars: true,
+    }),
     new HtmlWebpackPlugin({
       inject: "body",
       template: "src/scratch.html",
       filename: "scratch.html",
       chunks: ["scratch"],
+      templateParameters: {
+        publicUrl: publicUrl,
+      },
     }),
     new CopyWebpackPlugin({
       patterns: [
         { from: scratchStaticDir, to: "scratch-gui/static" },
-        { from: `${scratchStaticDir}/assets`, to: "static/assets" },
+        { from: `${scratchStaticDir}/assets`, to: "vendor/static/assets" },
         { from: scratchChunkDir, to: "chunks" },
-        { from: "public", to: "" },
-        { from: "src/projects", to: "projects" },
+        {
+          from: "node_modules/react/umd/react.production.min.js",
+          to: "vendor/react.production.min.js",
+        },
+        {
+          from: "node_modules/react-dom/umd/react-dom.production.min.js",
+          to: "vendor/react-dom.production.min.js",
+        },
+        {
+          from: "node_modules/redux/dist/redux.min.js",
+          to: "vendor/redux.min.js",
+        },
+        {
+          from: "node_modules/react-redux/dist/react-redux.min.js",
+          to: "vendor/react-redux.min.js",
+        },
+        {
+          from: "node_modules/@scratch/scratch-gui/dist/scratch-gui.js",
+          to: "vendor/scratch-gui.js",
+        },
+        {
+          from: "node_modules/@scratch/scratch-gui/dist/scratch-gui.js.LICENSE.txt",
+          to: "vendor/scratch-gui.js.LICENSE.txt",
+        },
       ],
     }),
   ],
   stats: "minimal",
 };
+
+module.exports = [mainConfig, scratchConfig];
