index.js

/* eslint-env browser */
/* global __webpack_public_path__ */
/* eslint-disable no-console, camelcase, no-global-assign */

import "./initial.css";
import "./simple.css";
import classes from "./simple.module.css";

console.log("___CLASSES__");
console.log(classes);

function replaceClass(originalClass, newClass) {
  const nodes = document.querySelectorAll(`.${originalClass}`);

  nodes.forEach((node) => {
    const { classList } = node;
    classList.remove(originalClass);
    classList.add(newClass);
  });
}

Object.keys(classes).forEach((localClass) => {
  replaceClass(localClass, classes[localClass]);
});

let oldClasses = classes;

if (module.hot) {
  module.hot.accept("./simple.module.css", () => {
    Object.keys(oldClasses).forEach((localClass) => {
      replaceClass(oldClasses[localClass], localClass);
    });
    Object.keys(classes).forEach((localClass) => {
      replaceClass(localClass, classes[localClass]);
    });
    oldClasses = classes;
    // eslint-disable-next-line no-alert
    alert("HMR updated CSS module");
  });
}

const handleError = (err) => {
  document.querySelector(".errors").textContent += `\n${err.toString()}`;
  console.error(err);
};

const makeButton = (className, fn, shouldDisable = true) => {
  const button = document.querySelector(className);
  button.addEventListener("click", () => {
    if (shouldDisable) {
      button.disabled = true;
    }
    fn()
      .then(() => {
        button.disabled = false;
      })
      .catch(handleError);
  });
};

makeButton(".lazy-button", () => import("./lazy"));
makeButton(".lazy-button2", () => import("./lazy2.css"));
makeButton(".lazy-module-button", () =>
  import("./lazy.module.css").then((module) => {
    console.log(module);
    document
      .querySelector(".lazy-css-module")
      // eslint-disable-next-line no-underscore-dangle
      .classList.add(module.__esModule ? module.default.style : module.style);
  })
);

makeButton(".preloaded-button1", () =>
  import(/* webpackChunkName: "preloaded1" */ "./preloaded1")
);
makeButton(".preloaded-button2", () =>
  import(/* webpackChunkName: "preloaded2" */ "./preloaded2")
);

makeButton(".lazy-failure-button", () => import("./lazy-failure"), false);

makeButton(".crossorigin", () => {
  const originalPublicPath = __webpack_public_path__;
  __webpack_public_path__ = "http://127.0.0.1:8080/dist/";
  const promise = import("./crossorigin").then(() => {
    const lastTwoElements = Array.from(document.head.children).slice(-2);
    const hasCrossorigin = lastTwoElements.every(
      (element) => element.crossOrigin === "anonymous"
    );
    if (!hasCrossorigin) {
      throw new Error('Chunks miss crossorigin="anonymous" attribute.');
    }
  });
  __webpack_public_path__ = originalPublicPath;
  return promise;
});

const worker = new Worker(new URL("./worker.js", import.meta.url));

worker.postMessage("test");

worker.addEventListener("message", (event) => {
  console.log(`Received message from worker: ${event.data}`);
});