swap browser-sync -> webpack-dev-server

gulpfile.js

@@ -1,11 +1,8 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import del from "del";
 import gulp from "gulp";
 import { task as execa } from "gulp-execa";
 import cache from "gulp-cache";
 import htmlmin from "gulp-html-minifier-terser";
-import BrowserSync from "browser-sync";
+import del from "del";
 
 // use up-to-date imagemin plugins instead of those bundled with gulp-imagemin:
 import imagemin from "gulp-imagemin";
@@ -14,9 +11,6 @@ import imageminPngquant from "imagemin-pngquant";
 import imageminGifsicle from "imagemin-gifsicle";
 import imageminSvgo from "imagemin-svgo";
 
-// https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#what-do-i-use-instead-of-__dirname-and-__filename
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 gulp.task("default", gulp.series(
   clean,
   npx("webpack", ["--mode", "production"]),
@@ -30,9 +24,8 @@ gulp.task("default", gulp.series(
 gulp.task("serve", gulp.series(
   clean,
   gulp.parallel(
-    npx("webpack", ["--watch", "--mode", "development"]),
+    npx("webpack", ["serve", "--mode", "development"]),
     npx("hugo", ["--watch", "--buildDrafts", "--buildFuture", "--verbose"]),
-    startServer,
   ),
 ));
 
@@ -47,27 +40,6 @@ function clean() {
   ]);
 }
 
-function startServer() {
-  const browserSync = BrowserSync.create();
-  const publicDir = path.resolve(__dirname, "public");
-
-  browserSync.init({
-    server: {
-      baseDir: publicDir,
-    },
-    port: process.env.PORT || 1337,
-    reloadDelay: 1000, // delay to prevent double-refresh from hugo & webpack negotiating
-    open: false,
-    ui: false,
-    notify: true,
-    localOnly: true,
-  });
-
-  return gulp
-    .watch("public/**/*")
-    .on("change", browserSync.reload);
-}
-
 function optimizeHtml() {
   return gulp
     .src("public/**/*.html", { base: "./" })

package.json

@@ -59,14 +59,13 @@
     "@babel/eslint-parser": "^7.15.4",
     "@babel/preset-env": "^7.15.6",
     "@jakejarvis/eslint-config": "*",
-    "@percy/cli": "^1.0.0-beta.67",
+    "@percy/cli": "^1.0.0-beta.68",
     "@types/numeral": "^2.0.1",
     "@types/twemoji": "^12.1.2",
     "@types/url-parse": "^1.4.4",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-template-html-minifier": "^4.1.0",
-    "browser-sync": "^2.27.5",
     "clean-css": "^5.1.5",
     "copy-webpack-plugin": "^9.0.1",
     "core-js": "^3.17.3",
@@ -118,6 +117,7 @@
     "webpack": "^5.52.1",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1",
     "webpack-subresource-integrity": "^5.0.0"
   },
   "optionalDependencies": {

webpack.config.js

@@ -2,7 +2,6 @@ import path from "path";
 import { fileURLToPath } from "url";
 import webpack from "webpack";
 import WebpackAssetsManifest from "webpack-assets-manifest";
-import { SubresourceIntegrityPlugin } from "webpack-subresource-integrity";
 import CopyPlugin from "copy-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
@@ -59,16 +58,16 @@ export default {
         },
       ],
     }),
-    new SubresourceIntegrityPlugin({
-      enabled: true,
-      hashFuncNames: ["sha384"],
-    }),
     new WebpackAssetsManifest({
       writeToDisk: true, // allow Hugo to access file in dev mode
       output: path.resolve(__dirname, "data/manifest.json"),
       publicPath: true,
       integrity: true,
       integrityHashes: ["sha384"],
+      customize: (entry) => {
+        // don't add thousands of unneeded twemoji graphics to the manifest
+        if (entry.key.startsWith("emoji/")) return false;
+      },
     }),
   ],
   module: {
@@ -219,4 +218,14 @@ export default {
       }),
     ],
   },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "public"),
+      watch: true,
+    },
+    host: "0.0.0.0", // weird docker bind behavior
+    port: process.env.PORT || 1337,
+    compress: true,
+    liveReload: true,
+  },
 };