workerize loader for webpack5

inspired by workerize-loader

you need to know

• target browser should support Proxy (bad news that Proxy is not ployfillable)
• this loader will do soemthing in loader pitch function.
• all function in worker will be wrapped by Promise
• only one webworker will be created, all function will be called in the same webworker.(so ,they are series.)(TODO: need to support parallel)
• you should not use default export in worker file. Loader only support named export.

demo

// index.ts
import type { WorkerFactory } from "../../dist/types";
import * as Worker from "./index.worker";
import type { expensive, addMy } from "./index.worker";
const startApp = () => {
  const instance = (
    Worker as unknown as WorkerFactory<{
      expensive: typeof expensive;
      addMy: typeof addMy;
    }>
  ).default();
  instance.expensive(100).then((res) => {
    console.log("res", res);
  });
};

startApp();

// call function in worker
// all function in worker will be wrapped by Promise
// block for `time` ms, then return the number of loops we could run in that time:
import { add } from "lodash-es";
import { addInFile } from "./utils";

const addC = () => {
  return add(1, 1);
};

export const expensive = (time: number) => {
  const start = Date.now();
  let count = 0;
  console.log("start");
  while (Date.now() - start < time) {
    count++;
  }
  console.log("end");
  return count;
};

export const addMy = (time: number) => {
  return add(1, 1) + addInFile() + addC();
};

// webpack.config.js

module.exports = {

  module: {
    rules: [
      {
        test: /\.worker\.ts$/,
        use: [
          {
            loader: path.resolve(__dirname, "../dist/index.js"),
            options: {
              inline: true,
            },
          },
        ],
      },

    ],
  },

};