@ideasonpurpose/build-tools-wordpress 1.1.6 → 1.1.8

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### v1.1.7
+
+> 4 March 2024
+
+- extracting the zip script, updated deps
+- WIP example webpack.config.js file
+- update readme
+
+#### v1.1.6
+
+> 30 January 2024
+
+- test stuff and fixes
+- misc fixes and first zip testing
+
 #### v1.1.5
 
 > 25 January 2024

package/README.md

@@ -1,18 +1,25 @@
 # @ideasonpurpose/build-tools-wordpress
 
-#### Version 1.1.6
+#### Version 1.1.8
 
 ![NPM Version](https://img.shields.io/npm/v/%40ideasonpurpose%2Fbuild-tools-wordpress?logo=npm)
 ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/ideasonpurpose/build-tools-wordpress/npm-publish.yml?logo=github&logoColor=white)
 
-
 Build scripts and dependencies for IOP's WordPress development environments.
 
+## Config
+
+Each project should have an **ideasonpurpose.config.js** file in the same directory as **package.json**. This file should export an object with at least three properties set:
+
+- **`src`** - The **source** directory containing source files which should be compiled or transposed. The contents of this directory will be omitted from builds.
+- **`dist`** - The **distribution** directory where processed, production-ready files will be output to. All contents of this directory will be included in builds.
+- **`src`** - An array of file entry points relative to the `src` directory. Each entry point will generate a like-named output file. All files and assets imported by a given entry point will be accessible from that entry's corresponding output file.
+
 ## About This Project
 
 These tools were migrated from our [Docker-based WordPress build tools](https://github.com/ideasonpurpose/docker-build) to speed up development and began the process of moving our build tools away from webpack. Gathering dependencies also simplifies the package.json files in host projects, making those slightly more manageable.
 
-The included webpack.config.js file works best when paired with a PHP environment like our [Docker WordPress environments](https://github.com/ideasonpurpose/docker-wordpress-dev). It's capable of proxying to other servers, but that's sort of crazy.
+The **example/webpack.config.js** file works best when paired with a PHP environment like our [Docker WordPress environments](https://github.com/ideasonpurpose/docker-wordpress-dev). It's capable of proxying to other servers, but that's sort of crazy.
 
 ### Additional Notes
 
@@ -20,12 +27,14 @@ This project expects an entirely ES Module based environment and specifies all d
 
 #### Publishing to [npm](https://www.npmjs.com/package/@ideasonpurpose/build-tools-wordpress)
 
-A GitHub action will auto-publish version-tagged releases to npm. In order to publish, the repository must have an `NPM_TOKEN` secret set with the token from npm. [Log into npmjs.org](https://www.npmjs.com/login) with a publish-authorized account, then find the token page linked from the Profile page sidebar. Generate a new token and update the repository secret. 
+A GitHub action will auto-publish version-tagged releases to npm. In order to publish, the repository must have an `NPM_TOKEN` secret set with the token from npm. [Log into npmjs.org](https://www.npmjs.com/login) with a publish-authorized account, then find the token page linked from the Profile page sidebar. Generate a new token and update the repository secret.
 
-##  
+<!-- START IOP CREDIT BLURB -->
 
+## &nbsp;
 
 #### Brought to you by IOP
 
 <a href="https://www.ideasonpurpose.com"><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/iop-logo-white-on-black-88px.png" height="44" align="top" alt="IOP Logo"></a><img src="https://raw.githubusercontent.com/ideasonpurpose/ideasonpurpose/master/spacer.png" align="middle" width="4" height="54"> This project is actively developed and used in production at <a href="https://www.ideasonpurpose.com">Ideas On Purpose</a>.
 
+<!-- END IOP CREDIT BLURB -->

package/bin/zip.js

@@ -1,5 +1,11 @@
-import fs from "fs-extra";
-import { posix as path } from "path";
+import { readJson, ensureFile } from "fs-extra/esm";
+import { stat } from "node:fs/promises";
+
+import { basename, dirname, join } from "node:path/posix";
+import { createReadStream, createWriteStream, statSync } from "node:fs";
+
+import { clearLine, cursorTo } from "node:readline";
+
 import url from "url";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
@@ -13,75 +19,48 @@ import cliTruncate from "cli-truncate";
 import stringLength from "string-length";
 import replaceStream from "replacestream";
 
-import buildConfig from "./lib/buildConfig.js";
-import { prettierHrtime } from "./lib/prettier-hrtime.js";
-
+// import buildConfig from "../lib/buildConfig.js";
+import { buildConfig } from "../index.js";
+// import {dirname} from "node:path";
+import { prettierHrtime } from "../lib/prettier-hrtime.js";
 
+// console.log(process.cwd());
+// console.log(import.meta.url);
+// console.log(new URL(import.meta.url));
 
-export async function  zip()  {
-  // const siteDir = new URL("../site", import.meta.url).pathname;
-  const siteDir = new URL(import.meta.url).pathname;
-  // const explorerSync = cosmiconfigSync("ideasonpurpose");
+async function getConfig() {
+  const siteDir = process.cwd();
   const explorer = cosmiconfig("ideasonpurpose");
-  // const configFile = explorerSync.search(siteDir);
   const configFile = await explorer.search(siteDir);
-}
-
-zip()
-
-/**
- * This script expects to the site to live in /usr/src/site/ to
- * match the webpack config. It can also be called with a single
- * path argument which will be evaluated relative to the script.
- * This can be used for testing, or to bundle any directory while
- * excluding src, node_modules, etc.
- */
-let siteDirBase = process.argv[2] || "/usr/src/site/";
-siteDirBase += siteDirBase.endsWith("/") ? "" : "/";
-// const siteDir = new URL(siteDirBase, import.meta.url);
-
-// const explorerSync = cosmiconfigSync("ideasonpurpose");
-// const configFile = explorerSync.search(siteDir.pathname) || {
-//   config: {},
-//   filepath: siteDir.pathname,
-// };
-// const configFileUrl = url.pathToFileURL(configFile.filepath);
-// const config = buildConfig(configFile);
-
-// const explorerSync = cosmiconfigSync("ideasonpurpose");
-// const configFile = explorerSync.search(siteDir);
-
-const configFile = {
-  filepath: fileURLToPath(
-    new URL("../site/ideasonpurpose.config.js", import.meta.url)
-  ),
-};
-const configFileUrl = pathToFileURL(configFile.filepath);
+  const config = await buildConfig(configFile);
 
-// import buildConfig from "./lib/buildConfig.js";
-import siteConfig from "../site/ideasonpurpose.config.js";
-
-console.log({ configFile, configFileUrl });
+  // config.configFileUrl2 = configFile.filepath;
+  console.log({ config, configFile });
 
+  return { config };
+}
+const { config } = await getConfig();
 
-return ;
-// const config = buildConfig(configFile ?? siteConfig);
-const config = buildConfig({ config: siteConfig });
+config.configFileUrl = new URL("package.json", config.configFileUrl);
+const packageJson = readJson(new URL("package.json", config.configFileUrl));
+packageJson.version = (await packageJson).version ??= "";
 
-const packageJson = fs.readJsonSync(new URL("package.json", configFileUrl));
-packageJson.version ??= "";
+console.log({ pgk: await packageJson });
+// console.log({ packageJson, env: process.env });
 
-const archiveName = packageJson.name || "archive";
+const archiveName = (await packageJson).name || "archive";
 
 const versionDirName = packageJson.version
   ? `${archiveName}-${packageJson.version}`.replace(/[ .]/g, "_")
   : archiveName;
 
 const zipFileName = `${versionDirName}.zip`;
-const zipFile = new URL(`_builds/${zipFileName}`, configFileUrl).pathname;
+const zipFile = new URL(`_builds/${zipFileName}`, config.configFileUrl);
+// .pathname;
 
-fs.ensureFileSync(zipFile);
-const output = fs.createWriteStream(zipFile);
+console.log({ zipFile, zipFileName });
+await ensureFile(zipFile.pathname);
+const output = createWriteStream(zipFile);
 
 output.on("finish", finishReporter);
 
@@ -95,7 +74,8 @@ const start = process.hrtime();
  * Set projectDir to the parent directory of config.src, all bundled
  * files will be found relative to this.
  */
-const projectDir = new URL(`${config.src}/../`, configFileUrl);
+const projectDir = new URL(`${config.src}/../`, config.configFileUrl);
+// process.exit();
 
 /**
  * Counters for total uncompressed size and number of files
@@ -105,7 +85,25 @@ let inBytes = 0;
 let fileCount = 0;
 
 const globOpts = { cwd: projectDir.pathname, nodir: false };
-globby(["**/*", "!src", "!_builds", "!**/*.sql", "!**/node_modules"], globOpts)
+globby(
+  [
+    "**/*",
+    "!_builds",
+    "!**/*.sql",
+    "!**/node_modules",
+    "!CHANGELOG.md",
+    "!composer.lock",
+    "!coverage*",
+    "!docker-compose.yml",
+    "!docker-compose.yml",
+    "!package-lock.json",
+    "!phpunit.xml",
+    "!src",
+    "!test",
+    "!tests",
+  ],
+  globOpts,
+)
   .then((fileList) => {
     /**
      * Throw an error and bail out if there are no files to zip
@@ -119,8 +117,8 @@ globby(["**/*", "!src", "!_builds", "!**/*.sql", "!**/node_modules"], globOpts)
     fileList.map((f) => {
       const file = {
         path: f,
-        stat: fs.statSync(new URL(f, projectDir)),
-        contents: fs.createReadStream(path.join(globOpts.cwd, f)),
+        stat: statSync(new URL(f, projectDir)),
+        contents: createReadStream(join(globOpts.cwd, f)),
       };
 
       /**
@@ -132,7 +130,7 @@ globby(["**/*", "!src", "!_builds", "!**/*.sql", "!**/node_modules"], globOpts)
         const devPath = new RegExp(`wp-content/themes/${archiveName}/`, "gi");
 
         file.contents = file.contents.pipe(
-          replaceStream(devPath, `wp-content/themes/${versionDirName}/`)
+          replaceStream(devPath, `wp-content/themes/${versionDirName}/`),
         );
       }
 
@@ -148,15 +146,15 @@ globby(["**/*", "!src", "!_builds", "!**/*.sql", "!**/node_modules"], globOpts)
        */
       file.contents.pause();
       return file;
-    })
+    }),
   )
   .then((fileList) =>
     fileList.map((f) =>
       archive.append(f.contents, {
         name: f.path,
         prefix: versionDirName,
-      })
-    )
+      }),
+    ),
   )
   .then(() => archive.finalize())
   .catch(console.error);
@@ -178,9 +176,12 @@ function foundReporter(file) {
   outString += chalk.blue(cliTruncate(file.path, cols, { position: "middle" }));
 
   if (fileCount % 25 == 0) {
-    process.stdout.clearLine();
-    process.stdout.cursorTo(0);
+    // process.stdout.clearLine();
+    clearLine(stdout);
+    // process.stdout.cursorTo(0);
+    cursorTo(stdout, 0);
     process.stdout.write(outString);
+
   }
 }
 
@@ -199,33 +200,33 @@ function finishReporter() {
     chalk.yellow("Found"),
     chalk.magenta(fileCount),
     chalk.yellow("files"),
-    chalk.gray(`(Uncompressed: ${filesize(inBytes)})`)
+    chalk.gray(`(Uncompressed: ${filesize(inBytes)})`),
   );
   console.log(
     "👀 ",
     chalk.yellow("Webpack Bundle Analyzer report:"),
-    chalk.magenta("webpack/stats/index.html")
+    chalk.magenta("webpack/stats/index.html"),
   );
   console.log(
     "📦 ",
     chalk.yellow("Created"),
     chalk.magenta(filesize(outBytes)),
     chalk.yellow("Zip archive"),
-    chalk.gray(`(Saved ${filesize(savedBytes)}, ${savedPercent}%)`)
+    chalk.gray(`(Saved ${filesize(savedBytes)}, ${savedPercent}%)`),
   );
   console.log(
     "🎁 ",
     chalk.yellow("Theme archive"),
     chalk.magenta(
-      `${path.basename(path.dirname(zipFile))}/${chalk.bold(zipFileName)}`
+      `${basename(dirname(zipFile.pathname))}/${chalk.bold(zipFileName)}`,
     ),
     chalk.yellow("created in"),
-    chalk.magenta(duration)
+    chalk.magenta(duration),
   );
   console.log("⏳");
   console.log(
     "🚀 ",
-    chalk.bold(`Remember to push to ${chalk.cyan("GitHub!")}`)
+    chalk.bold(`Remember to push to ${chalk.cyan("GitHub!")}`),
   );
   console.log("✨");
 }

package/example/webpack.config.js

@@ -0,0 +1,593 @@
+import { posix as path } from "path";
+
+import { statSync } from "fs";
+import { cosmiconfig, cosmiconfigSync } from "cosmiconfig";
+import chalk from "chalk";
+
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import { EsbuildPlugin } from "esbuild-loader";
+
+import CopyPlugin from "copy-webpack-plugin";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import ImageMinimizerPlugin from "image-minimizer-webpack-plugin";
+
+import {
+  AfterDoneReporterPlugin,
+  buildConfig,
+  DependencyManifestPlugin,
+  devserverProxy,
+  findLocalPort,
+  WatchRunReporterPlugin,
+} from "@ideasonpurpose/build-tools-wordpress";
+
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+
+/**
+ * Sass flavors for conditional sass-loader implementations
+ */
+import * as nodeSass from "sass";
+import * as dartSass from "sass-embedded";
+
+// Experimenting with this
+import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
+
+/**
+ * Force `mode: production` when running the analyzer
+ * TODO: webpack5 changed env in here, might need to change WEBPACK_BUNDLE_ANALYZER
+ */
+if (process.env.WEBPACK_BUNDLE_ANALYZER) process.env.NODE_ENV = "production";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+const stats = {
+  preset: "normal",
+  cachedAssets: false,
+  assets: true,
+  // assetsSpace: 12,
+  // context: new URL( import.meta.url).pathname,
+  // all: true,
+  // assets: true,
+  // builtAt: true,
+  // cachedModules: true,
+  // children: false, // Adds a bunch of blank lines to stats output
+  // chunkGroups: false,
+  // chunkModules: false,
+  // chunkOrigins: true,
+  // chunkRelations: true,
+  // chunks: false,
+  // colors: true,
+  // depth: false,
+  // env: true,
+  // orphanModules: false,
+  // dependentModules: true,
+  modules: false,
+  groupAssetsByChunk: true,
+  entrypoints: true,
+  // // errorDetails: "auto",
+  children: false,
+  // errorDetails: true,
+  errors: true,
+  errorStack: true,
+  // excludeAssets: [/hot-update/, /_sock-/],
+  // groupAssetsByChunk: true,
+  // logging: "warn",
+  // optimizationBailout: true,
+  // loggingTrace: false,
+  performance: true,
+  reasons: true,
+  relatedAssets: true,
+  timings: true,
+  version: true,
+  warnings: true,
+  loggingDebug: ["sass-loader"],
+};
+
+export default async (env) => {
+  // const siteDir = new URL("../site", import.meta.url).pathname;
+  const siteDir = new URL(import.meta.url).pathname;
+  // const explorerSync = cosmiconfigSync("ideasonpurpose");
+  const explorer = cosmiconfig("ideasonpurpose");
+  // const configFile = explorerSync.search(siteDir);
+  const configFile = await explorer.search(siteDir);
+
+  // import buildConfig from "./lib/buildConfig.js";
+  // console.log({ siteDir, configFile, nm: path.resolve("node_modules") });
+
+  const config = await buildConfig(configFile);
+
+  setTimeout(() =>
+    console.log(
+      chalk.magenta.bold("sass implementation"),
+      chalk.yellow.bold(config.sass),
+      config.sass === "sass" ? nodeSass : dartSass,
+    ),
+  );
+
+  /**
+   * `usePolling` is a placeholder, try and detect native Windows Docker mounts
+   * since they don't support file-watching (no inotify events), if there's
+   * something clean, use that instead. For now, this will force-enable polling.
+   *
+   * TODO: Why so much dancing around defaults when this could just inherit from default.config?
+   */
+  const usePolling = Boolean(config.usePolling);
+  const pollInterval = Math.max(
+    parseInt(config.pollInterval, 10) || parseInt(config.usePolling, 10) || 400,
+    400,
+  );
+
+  const devtool = config.devtool || false;
+
+  console.log({ config, devServerProxy: await devserverProxy(config) });
+
+  return {
+    // stats: "errors-warnings",
+    stats,
+    module: {
+      rules: [
+        // {
+        //   test: /\.(js|jsx|mjs)$/,
+        //   include: [
+        //     path.resolve(config.src),
+        //     path.resolve("../tools/node_modules"),
+        //     path.resolve("../site/node_modules"),
+        //   ],
+        //   exclude: function (module) {
+        //     const moduleRegex = new RegExp(
+        //       `node_modules/(${config.transpileDependencies.join("|")})`
+        //     );
+        //     return /node_modules/.test(module) && !moduleRegex.test(module);
+        //   },
+
+        //   /**
+        //    * EXPERIMENTAL!!
+        //    * If JS compilation breaks, try reverting this first.
+        //    */
+        //   loader: "esbuild-loader",
+        //   options: {
+        //     loader: "jsx",
+        //     target: "es2015",
+        //   },
+
+        /**
+         * Updated 2022-09, simpler
+         */
+        {
+          test: /\.m?jsx?$/,
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            target: "es2015",
+          },
+        },
+        {
+          test: /\.tsx?$/,
+          loader: "esbuild-loader",
+          options: {
+            loader: "tsx",
+            target: "es2015",
+          },
+        },
+
+        // use: {
+        //   loader: "babel-loader",
+        //   options: {
+        //     cacheDirectory: !isProduction,
+        //     sourceType: "unambiguous",
+        //     plugins: [
+        //       "@babel/plugin-syntax-dynamic-import",
+        //       ...(isProduction
+        //         ? []
+        //         : ["@babel/plugin-transform-react-jsx-source"]),
+        //     ],
+        //     presets: [
+        //       [
+        //         "@babel/preset-env",
+        //         {
+        //           forceAllTransforms: true,
+        //           useBuiltIns: "usage",
+        //           configPath: config.src,
+        //           corejs: 3,
+        //           modules: false,
+        //           debug: false,
+        //         },
+        //       ],
+        //       "@babel/preset-react",
+        //     ],
+        //   },
+        // },
+        // },
+        {
+          test: /\.(scss|css)$/,
+          use: [
+            { loader: MiniCssExtractPlugin.loader },
+            {
+              loader: "css-loader",
+              options: {
+                import: false, // imports already handled by Sass or PostCSS
+                // sourceMap: !isProduction,
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: isProduction
+                    ? [
+                        autoprefixer,
+                        cssnano({ preset: ["default", { colormin: false }] }),
+                      ]
+                    : [autoprefixer],
+                },
+              },
+            },
+            // {
+            //   loader: "resolve-url-loader",
+            //   options: {
+            //     // sourceMap: true,
+            //     // debug: true,
+            //   },
+            // },
+            {
+              loader: "sass-loader",
+              options: {
+                implementation: config.sass === "sass" ? nodeSass : dartSass,
+                // implementation: nodeSass,
+                // implementation: await import(config.sass),
+                sourceMap: !isProduction,
+                warnRuleAsWarning: true,
+                webpackImporter: false,
+                sassOptions: {
+                  // api: "modern",
+
+                  includePaths: [
+                    path.resolve(config.src, "sass"),
+                    // path.resolve("../site/node_modules"),
+                    path.resolve("node_modules"),
+                  ],
+                  style: "expanded",
+                  verbose: true,
+                },
+              },
+            },
+          ],
+        },
+        /**
+         * This image loader is specifically for images which are required or
+         * imported into a webpack processed entry file. Optimization is
+         * handled by image-minimizer-webpack-plugin. These assets will be
+         * renamed with a chunkhash fragment.
+         *
+         * All images under `config.src` will be optimized and copied by
+         * copy-webpack-plugin but will keep their original filenames and
+         * relative paths. Images included in SCSS files will be processed
+         * twice, once with a hashed name and again with its original name.
+         */
+        {
+          test: /\.(jpe?g|png|gif|tif|webp|avif)$/i,
+          type: "asset",
+        },
+
+        /**
+         * SVGs can be imported as asset urls or React components
+         *
+         * To import an SVG file as a src url, append ?url to the filename:
+         *     import svg from './assets/file.svg?url'
+         *
+         * To import an SVG file as a React component
+
+         * @link https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+         */
+        {
+          test: /\.svg$/i,
+          type: "asset",
+          resourceQuery: /url/, // *.svg?url
+        },
+        {
+          test: /\.svg$/i,
+          issuer: /\.[jt]sx?$/,
+          resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+          use: ["@svgr/webpack"],
+        },
+        {
+          test: /fonts\/.*\.(ttf|eot|woff2?)$/i,
+          type: "asset",
+        },
+      ],
+    },
+
+    context: path.resolve(config.src),
+
+    resolve: {
+      modules: [
+        path.resolve("../tools/node_modules"),
+        path.resolve("../site/node_modules"),
+        path.resolve("./node_modules"),
+      ],
+    },
+
+    resolveLoader: {
+      modules: [
+        path.resolve("../tools/node_modules"),
+        path.resolve("./node_modules"), // for local development when running outside of Docker
+      ],
+    },
+
+    entry: config.entry,
+
+    output: {
+      path: new URL(config.dist, import.meta.url).pathname,
+      /**
+       * Primary output filenames SHOULD NOT include hashes in development because
+       * some files are written to disk from devServer middleware. Because those
+       * files are written outside standard webpack output, they aren't cleaned
+       * up by standard webpack cleaning functions.
+       */
+      filename: isProduction ? "[name]-[contenthash:8].js" : "[name].js",
+      chunkFilename: "[id]-[chunkhash:8].js",
+      publicPath: config.publicPath,
+      /**
+       * Assets are not cleaned when writeToDisk is true in devServer
+       * Works correctly with builds.
+       * @link https://github.com/webpack/webpack-dev-middleware/issues/861
+       */
+      clean: true,
+    },
+
+    devServer: {
+      host: "0.0.0.0",
+      allowedHosts: "all",
+      // setupExitSignals: true,// default
+
+      compress: config.devServerCompress || false, // TODO: True by default in devServer v4, exposed via config.devServerCompress to test speed impact
+      port: "auto",
+      // hot: true, // TODO: What does 'only' do? https://webpack.js.org/configuration/dev-server/#devserverhot
+      hot: 'only', // TODO: What does 'only' do? https://webpack.js.org/configuration/dev-server/#devserverhot
+      client: {
+        // logging: "error", // TODO: New, is this ok?
+        logging: "info", // TODO: New, is this ok?
+        overlay: true, // { warnings: true, errors: true },
+        progress: true, // TODO: New, is this ok?
+        reconnect: 30,
+        // webSocketURL: {
+        //   port: parseInt(process.env.PORT), // external port, so websockets hit the right endpoint
+        // },
+      },
+      // webSocketServer: "ws",
+      // static: {
+      //   // TODO: Should contentBase be `false` when there's a proxy?
+      //   directory: path.join("/usr/src/site/", config.contentBase),
+      //   /*
+      //    * TODO: Poll options were enabled as a workaround for Docker-win volume inotify
+      //    *       issues. Looking to make this conditional...
+      //    *       Maybe defined `isWindows` or `hasiNotify` for assigning a value
+      //    *       Placeholder defined at the top of the file.
+      //    *       For now, `usePolling` is a boolean (set to true)
+      //    *       ref: https://github.com/docker/for-win/issues/56
+      //    *            https://www.npmjs.com/package/is-windows
+      //    *       TODO: Safe to remove?
+      //    *       TODO: Test on vanilla Windows (should now work in WSL)
+      //    */
+
+      //   watch: {
+      //     poll: usePolling && pollInterval,
+      //     ignored: ["node_modules", "vendor"],
+      //   },
+      // },
+
+      devMiddleware: {
+        index: false, // enable root proxying
+
+        writeToDisk: (filePath) => {
+          /**
+           * Note: If this is an async function, it will write everything to disk
+           *
+           * Never write hot-update files to disk.
+           */
+          // vendors-node_modules_mini-css-extract-plugin_dist_hmr_hotModuleReplacement_js-node_modules_we-780fe4.js.map
+          if (/.+(hot-update)\.(js|json|js\.map)$/.test(filePath)) {
+            return false;
+          }
+          // SHORT_CIRCUIT FOR TESTING
+          return true;
+
+          if (/.+\.(svg|json|php|jpg|png)$/.test(filePath)) {
+            const fileStat = statSync(filePath, { throwIfNoEntry: false });
+
+            /**
+             * Always write SVG, PHP & JSON files
+             */
+            if (/.+\.(svg|json|php)$/.test(filePath)) {
+              return true;
+            } else {
+              /**
+               * Write any images under 100k and anything not yet on disk
+               */
+              if (!fileStat || fileStat.size < 100 * 1024) {
+                return true;
+              }
+              /**
+               * TODO: This might all be unnecessary. Webpack seems to be doing a good job with its native caching
+               */
+              // const randOffset = Math.random() * 300000; // 0-5 minutes
+              // const expired = new Date() - fileStat.mtime > randOffset;
+              // const relPath = filePath.replace(config.dist, "dist");
+              // if (expired) {
+              //   console.log("DEBUG writeToDisk:", { replacing: relPath });
+              //   return true;
+              // }
+              // console.log("DEBUG writeToDisk:", { cached: relPath });
+            }
+          }
+          return false;
+        },
+        // stats,
+        // stats: 'verbose',
+      },
+
+      // NOTE: trying to make injection conditional so wp-admin stops reloading
+      // injectClient: compilerConfig => {
+      //   console.log(compilerConfig);
+      //   return true;
+      // },
+
+      onListening: (devServer) => {
+        const port = devServer.server.address().port;
+        devServer.compiler.options.devServer.port =
+          devServer.server.address().port;
+        devServer.compiler._devServer = devServer;
+
+        console.log("Listening on port:", port);
+      },
+
+      setupMiddlewares: (middlewares, devServer) => {
+        // devServer.compiler.options.devServer.port =  devServer.options.port;
+        // devServer.compiler._devServer =  devServer;
+        // if (!devServer) {
+        //   throw new Error("webpack-dev-server is not defined");
+        // }
+
+        /**
+         * The `/inform` route is an annoying bit of code. Here's why:
+         * Ubiquity Wi-fi hardware frequently spams the shit out of their
+         * networks, specifically requesting the `/inform` route from
+         * every device. We still have some Ubiquity hardware on our
+         * networks, so dev servers were constantly responding to
+         * `/inform` requests with 404s, filling logs and cluttering
+         * terminals. So that's why this is here. I hate it.
+         */
+        devServer.app.all("/inform", () => false);
+
+        /**
+         * The "/webpack/reload" endpoint will trigger a full devServer refresh
+         * Originally from our Browsersync implementation:
+         *
+         * https://github.com/ideasonpurpose/wp-theme-init/blob/ad8039c9757ffc3a0a0ed0adcc616a013fdc8604/src/ThemeInit.php#L202
+         */
+        devServer.app.get("/webpack/reload", (req, res) => {
+          console.log(
+            chalk.yellow("Reload triggered by request to /webpack/reload"),
+          );
+
+          devServer.sendMessage(
+            devServer.webSocketServer.clients,
+            "content-changed",
+          );
+          res.json({ status: "Reloading!" });
+        });
+
+        return middlewares;
+      },
+
+      watchFiles: {
+        paths: [
+          path.resolve(config.src, "../**/*.{php,json}"), // WordPress
+          // path.resolve(config.src, `../${config.contentBase}/*.html`), // Jekyll
+        ],
+        options: {
+          ignored: ["**/.git/**", "**/vendor/**", "**/node_modules/**", "**/dist/**"],
+          ignoreInitial: true,
+          ignorePermissionErrors: true,
+          /**
+           * TODO: Can polling be removed everywhere?
+           * @link  https://github.com/docker/for-win/issues/56#issuecomment-576749639
+           */
+          usePolling,
+          interval: pollInterval,
+        },
+      },
+
+      ...(await devserverProxy(config)),
+    },
+
+    mode: isProduction ? "production" : "development",
+
+    performance: {
+      hints: isProduction ? "warning" : false,
+    },
+
+    devtool,
+
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: isProduction ? "[name]-[contenthash:8].css" : "[name].css",
+      }),
+
+      new CopyPlugin({
+        patterns: [
+          {
+            from: "**/*",
+            globOptions: {
+              dot: true, // TODO: Dangerous? Why is this ever necessary?!
+              ignore: [
+                "**/{.gitignore,.DS_Store,*:Zone.Identifier}",
+                config.src + "/{blocks,fonts,js,sass}/**",
+              ],
+            },
+          },
+        ],
+        options: { concurrency: 50 },
+      }),
+
+      /**
+       * @link https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dependency-extraction-webpack-plugin/
+       */
+      new DependencyExtractionWebpackPlugin(),
+
+      new DependencyManifestPlugin({
+        writeManifestFile: true,
+        manifestFile: config.manifestFile,
+      }),
+
+      new WatchRunReporterPlugin(),
+
+      new AfterDoneReporterPlugin({
+        echo: env && env.WEBPACK_SERVE,
+        // message:
+        //   "Dev site " + chalk.blue.bold(`http://localhost:${process.env.PORT}`),
+      }),
+
+      new BundleAnalyzerPlugin({
+        analyzerMode: isProduction ? "static" : "disabled",
+        openAnalyzer: false,
+        reportFilename: path.resolve(siteDir, "webpack/stats/index.html"),
+      }),
+    ],
+    optimization: {
+      splitChunks: {
+        chunks: "all",
+      },
+      minimizer: [
+        new EsbuildPlugin({
+          /**
+           * Additional targets, can we bump this up to es2020 yet?
+           * TODO: Expose this to the config
+           * @link https://esbuild.github.io/content-types/#javascript
+           */
+          target: "es2015",
+        }),
+        new ImageMinimizerPlugin({
+          severityError: "error",
+
+          minimizer: {
+            implementation: ImageMinimizerPlugin.sharpMinify,
+
+            options: {
+              /**
+               * Sharp options
+               */
+              encodeOptions: {
+                jpeg: {
+                  quality: 70,
+                  mozjpeg: true,
+                },
+                png: {},
+              },
+            },
+          },
+        }),
+      ],
+    },
+  };
+};

package/lib/buildConfig.js

@@ -1,6 +1,7 @@
 import fs from "fs-extra";
 import { posix as path } from "path";
 import chalk from "chalk";
+import url from "url";
 
 import { findLocalPort } from "../index.js";
 
@@ -87,7 +88,7 @@ export async function buildConfig(configFile = { config: {} }) {
   configFile.filepath = configFile.filepath || "../site/placeholder.file";
   config.src = path.resolve(configFile.filepath, "..", config.src);
   config.dist = path.resolve(configFile.filepath, "..", config.dist);
-
+  config.configFileUrl = url.pathToFileURL(configFile.filepath);
   /**
    * Check for `config.src` and create it if missing
    * TODO: unresolved, create the file? Fail? Throw error?

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ideasonpurpose/build-tools-wordpress",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Build scripts and dependencies for IOP's WordPress development environments.",
   "homepage": "https://github.com/ideasonpurpose/build-tools-wordpress#readme",
   "bugs": {
@@ -31,19 +31,19 @@
   "prettier": "@ideasonpurpose/prettier-config",
   "dependencies": {
     "@ideasonpurpose/prettier-config": "^0.0.4",
-    "@prettier/plugin-php": "^0.22.1",
+    "@prettier/plugin-php": "^0.22.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@svgr/webpack": "^8.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^5.0.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^5.3.0",
     "ansi-html": "^0.0.9",
-    "archiver": "^6.0.1",
+    "archiver": "^7.0.0",
     "auto-changelog": "^2.4.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.18",
     "babel-loader": "^9.1.3",
     "body-parser": "^1.20.2",
-    "caniuse-lite": "^1.0.30001579",
+    "caniuse-lite": "^1.0.30001593",
     "chalk": "^5.3.0",
     "chalk-cli": "^5.0.1",
     "classnames": "^2.5.1",
@@ -51,46 +51,46 @@
     "copy-webpack-plugin": "^12.0.2",
     "cosmiconfig": "^9.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.9.1",
-    "cssnano": "^6.0.1",
+    "css-loader": "^6.10.0",
+    "cssnano": "^6.0.5",
     "del": "^7.1.0",
-    "dotenv": "^16.4.0",
+    "dotenv": "^16.4.5",
     "esbuild-loader": "^4.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.33.2",
     "filesize": "^10.0.12",
     "fs-extra": "^11.1.1",
-    "globby": "^14.0.0",
+    "globby": "^14.0.1",
     "http-proxy": "^1.18.1",
     "humanize-duration": "^3.31.0",
     "image-minimizer-webpack-plugin": "^4.0.0",
     "is-text-path": "^2.0.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "^2.8.1",
     "node-sass": "^9.0.0",
-    "postcss": "^8.4.29",
-    "postcss-loader": "^8.0.0",
+    "postcss": "^8.4.35",
+    "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
     "pretty-hrtime": "^1.0.3",
     "replacestream": "^4.0.3",
-    "sass": "^1.70.0",
-    "sass-embedded": "^1.70.0",
-    "sass-loader": "^14.0.0",
-    "semver": "^7.5.4",
+    "sass": "^1.71.1",
+    "sass-embedded": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "semver": "^7.6.0",
     "sharp": "^0.33.2",
-    "sort-package-json": "^2.6.0",
+    "sort-package-json": "^2.8.0",
     "source-map-explorer": "^2.5.3",
     "string-length": "^6.0.0",
     "style-loader": "^3.3.3",
-    "stylelint": "^16.2.0",
+    "stylelint": "^16.2.1",
     "stylelint-order": "^6.0.4",
     "stylelint-prettier": "^5.0.0",
     "svgo": "^3.0.2",
     "svgo-loader": "^4.0.0",
     "version-everything": "^0.11.0",
-    "webpack": "^5.90.0",
+    "webpack": "^5.90.3",
     "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-middleware": "^7.0.0",
@@ -102,7 +102,7 @@
     ]
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^1.2.2",
-    "vitest": "^1.2.1"
+    "@vitest/coverage-v8": "^1.3.1",
+    "vitest": "^1.3.1"
   }
 }