Merge pull request #865 from evershopcommerce/webpack

Feat: Use Single Webpack Instance in Dev Mode #806

Author: treoden

package-lock.json

@@ -18,7 +18,7 @@
     "theme:create": "evershop theme:create",
     "compile": "rimraf ./packages/evershop/dist && cd ./packages/evershop && swc ./src/ -d dist/ --config-file .swcrc --copy-files --strip-leading-paths",
     "compile:db": "rimraf ./packages/postgres-query-builder/dist && cd ./packages/postgres-query-builder && swc ./src/ -d dist/ --config-file .swcrc --copy-files --strip-leading-paths",
-    "compile:tsc": "rimraf ./packages/evershop/dist && cd ./packages/evershop && tsc && copyfiles -u 1 \"src/**/*.{graphql,scss,json}\" dist",
+    "compile:tsc": "rimraf ./packages/evershop/dist && cd ./packages/evershop && tsc && copyfiles -u 1 \"src/**/*.{graphql,scss,css,json}\" dist",
     "start:debug": "node ./packages/evershop/dist/bin/start/index.js --debug",
     "test": "ALLOW_CONFIG_MUTATIONS=true NODE_OPTIONS=--experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./packages",

package.json

@@ -197,7 +197,6 @@
     "pg": "^8.16.3",
     "postcss": "^8.4.18",
     "postcss-loader": "^8.2.0",
-    "postcss-prefix-selector": "^2.1.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

packages/evershop/package.json

@@ -3,9 +3,6 @@ import sessionStorage from 'connect-pg-simple';
 import cookieParser from 'cookie-parser';
 import session from 'express-session';
 import pathToRegexp from 'path-to-regexp';
-import webpack from 'webpack';
-import middleware from 'webpack-dev-middleware';
-import webpackHotMiddleware from 'webpack-hot-middleware';
 import { translate } from '../../lib/locale/translate/translate.js';
 import { debug, warning } from '../../lib/log/logger.js';
 import publicStatic from '../../lib/middlewares/publicStatic.js';
@@ -15,13 +12,11 @@ import { getRoutes } from '../../lib/router/Router.js';
 import { getConfig } from '../../lib/util/getConfig.js';
 import isDevelopmentMode from '../../lib/util/isDevelopmentMode.js';
 import isProductionMode from '../../lib/util/isProductionMode.js';
-import { createConfigClient } from '../../lib/webpack/dev/createConfigClient.js';
-import { isBuildRequired } from '../../lib/webpack/isBuildRequired.js';
 import { getAdminSessionCookieName } from '../../modules/auth/services/getAdminSessionCookieName.js';
 import { getCookieSecret } from '../../modules/auth/services/getCookieSecret.js';
 import { getFrontStoreSessionCookieName } from '../../modules/auth/services/getFrontStoreSessionCookieName.js';
 import { setPageMetaInfo } from '../../modules/cms/services/pageMetaInfo.js';
-import { findRoute } from './findRoute.js';
+import { getDevMiddleware, getHotMiddleware } from './devEnvHelper.js';
 
 export function addDefaultMiddlewareFuncs(app) {
   app.use((request, response, next) => {
@@ -172,63 +167,60 @@ export function addDefaultMiddlewareFuncs(app) {
     }
   });
 
-  app.use(async (request, response, next) => {
-    if (!isDevelopmentMode()) {
-      return next();
-    }
+  if (isDevelopmentMode()) {
+    // Admin webpack dev middleware - only for /backend/* paths
+    app.use((request, response, next) => {
+      if (request.path.startsWith('/backend/')) {
+        const adminDevMiddleware = getDevMiddleware(true);
+        adminDevMiddleware.waitUntilValid(() => {
+          const { stats } = adminDevMiddleware.context;
+          if (stats) {
+            response.locals.jsonWebpackStats = stats.toJson();
+          }
+        });
+        adminDevMiddleware(request, response, next);
+      } else {
+        next();
+      }
+    });
 
-    const route = findRoute(request);
-    if (!route || !isBuildRequired(route)) {
-      next();
-    } else {
-      if (!app.locals.webpackCompiler) {
-        app.locals.webpackCompiler = webpack(createConfigClient() as any);
+    app.use((request, response, next) => {
+      if (request.path.startsWith('/__webpack_hmr_admin')) {
+        const adminHotMiddleware = getHotMiddleware(true);
+        adminHotMiddleware(request, response, next);
+      } else {
+        next();
       }
-      const { webpackCompiler } = app.locals;
-      let middlewareFunc;
-      if (!app.locals.webpackMiddleware) {
-        middlewareFunc = app.locals.webpackMiddleware = middleware(
-          webpackCompiler,
-          {
-            serverSideRender: true,
-            publicPath: '/',
-            stats: 'none'
+    });
+
+    // Frontstore webpack dev middleware - for all other paths
+    app.use((request, response, next) => {
+      if (
+        !request.path.startsWith('/backend/') &&
+        !request.path.startsWith('/__webpack_hmr_admin')
+      ) {
+        const frontstoreDevMiddleware = getDevMiddleware(false);
+        frontstoreDevMiddleware.waitUntilValid(() => {
+          const { stats } = frontstoreDevMiddleware.context;
+          if (stats) {
+            response.locals.jsonWebpackStats = stats.toJson();
           }
-        );
-        middlewareFunc.context.logger.info = () => {};
+        });
+        frontstoreDevMiddleware(request, response, next);
       } else {
-        middlewareFunc = app.locals.webpackMiddleware;
+        next();
       }
-      middlewareFunc.waitUntilValid(() => {
-        const { stats } = middlewareFunc.context;
-        const jsonWebpackStats = stats.toJson();
-        response.locals.jsonWebpackStats = jsonWebpackStats;
-      });
-
-      middlewareFunc(request, response, next);
-    }
-  });
-  app.use((request, response, next) => {
-    if (!isDevelopmentMode()) {
-      return next();
-    }
-    const route = findRoute(request);
-    request.currentRoute = route;
-    if (!isBuildRequired(route)) {
-      return next();
-    }
-    if (!app.locals.hotMiddleware) {
-      const { webpackCompiler } = app.locals;
-      const hotMiddleware = webpackHotMiddleware(webpackCompiler, {
-        path: `/eHot`
-      });
-      app.locals.hotMiddleware = hotMiddleware;
-    }
-    return app.locals.hotMiddleware(request, response, () => {
-      next();
     });
-  });
 
+    app.use((request, response, next) => {
+      if (request.path.startsWith('/__webpack_hmr_frontstore')) {
+        const frontstoreHotMiddleware = getHotMiddleware(false);
+        frontstoreHotMiddleware(request, response, next);
+      } else {
+        next();
+      }
+    });
+  }
   /** 404 Not Found handle */
   app.use((request, response, next) => {
     if (!request.currentRoute) {

packages/evershop/src/bin/lib/addDefaultMiddlewareFuncs.ts

@@ -27,6 +27,7 @@ export const loadBootstrapScript = async function loadBootstrapScript(
   if (!existsSync(filePath)) {
     return;
   }
+
   // Convert path to a URL
   const bootstrapPath = pathToFileURL(filePath).toString();
   const bootstrap = (await import(bootstrapPath)) as BootstrapModule;

packages/evershop/src/bin/lib/bootstrap/bootstrap.ts

@@ -7,8 +7,8 @@ import JSON5 from 'json5';
 import { getComponentsByRoute } from '../../lib/componee/getComponentsByRoute.js';
 import { CONSTANTS } from '../../lib/helpers.js';
 import { error } from '../../lib/log/logger.js';
-import { getRouteBuildPath } from '../../lib/webpack/getRouteBuildPath.js';
 import { generateComponentKey } from '../../lib/util/keyGenerator.js';
+import { getRouteBuildPath } from '../../lib/webpack/getRouteBuildPath.js';
 import { parseGraphql } from '../../lib/webpack/util/parseGraphql.js';
 import { getEnabledWidgets } from '../../lib/widget/widgetManager.js';
 /**

packages/evershop/src/bin/lib/buildEntry.js

@@ -0,0 +1,59 @@
+import webpack from 'webpack';
+import middleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import { createConfigClient } from '../../lib/webpack/dev/createConfigClient.js';
+
+type DevConfig = {
+  admin: {
+    compiler?: webpack.Compiler;
+    devMiddleware?: ReturnType<typeof middleware>;
+    hotMiddleware?: ReturnType<typeof webpackHotMiddleware>;
+  };
+  frontStore: {
+    compiler?: webpack.Compiler | null;
+    devMiddleware?: ReturnType<typeof middleware> | null;
+    hotMiddleware?: ReturnType<typeof webpackHotMiddleware> | null;
+  };
+};
+
+const webpackConfig = {
+  admin: {},
+  frontStore: {}
+} as DevConfig;
+
+function getWebpackCompiler(isAdmin: boolean) {
+  const area = isAdmin ? 'admin' : 'frontStore';
+  if (!webpackConfig[area].compiler) {
+    webpackConfig[area].compiler = webpack(createConfigClient(isAdmin) as any);
+  }
+  return webpackConfig[area].compiler;
+}
+
+function getDevMiddleware(isAdmin: boolean) {
+  const area = isAdmin ? 'admin' : 'frontStore';
+  if (!webpackConfig[area].devMiddleware) {
+    const compiler = getWebpackCompiler(isAdmin);
+    const devMiddleware = middleware(compiler, {
+      serverSideRender: true,
+      publicPath: isAdmin ? '/backend/' : '/',
+      stats: 'none'
+    });
+    devMiddleware.context.logger.info = () => {};
+    webpackConfig[area].devMiddleware = devMiddleware;
+  }
+  return webpackConfig[area].devMiddleware;
+}
+
+function getHotMiddleware(isAdmin: boolean) {
+  const area = isAdmin ? 'admin' : 'frontStore';
+  if (!webpackConfig[area].hotMiddleware) {
+    const compiler = getWebpackCompiler(isAdmin);
+    const hotMiddleware = webpackHotMiddleware(compiler, {
+      path: isAdmin ? `/__webpack_hmr_admin` : `/__webpack_hmr_frontstore`
+    });
+    webpackConfig[area].hotMiddleware = hotMiddleware;
+  }
+  return webpackConfig[area].hotMiddleware;
+}
+
+export { getWebpackCompiler, getDevMiddleware, getHotMiddleware };

packages/evershop/src/bin/lib/devEnvHelper.ts

@@ -3,12 +3,10 @@ import { App } from '@components/common/react/client/Client';
 import { HotReload } from '@components/common/react/client/HotReload';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import hot from 'webpack-hot-middleware/client?path=/eHot&reload=true&overlay=true';
 /** render */
 ReactDOM.render(
   <App>
     <Area />
-    <HotReload hot={hot} />
   </App>,
   document.getElementById('app')
 );

packages/evershop/src/bin/lib/findRoute.ts

@@ -38,9 +38,11 @@ interface AllRouteComponentsMap {
  * Scan components for all routes
  * @returns A map of route IDs to their components
  */
-export function getAllRouteComponents(): AllRouteComponentsMap {
+export function getAllRouteComponents(isAdmin = false): AllRouteComponentsMap {
   const allComponents: AllRouteComponentsMap = {};
-  const routes = getRoutes();
+  const routes = getRoutes().filter(
+    (route) => route.isApi === false && route.isAdmin === isAdmin
+  );
   routes.forEach((route) => {
     allComponents[route.id] = getComponentsByRoute(route);
   });