Feature parity with `worker-loader` #14198

mmazzarolo · 2021-09-09T17:23:04Z

mmazzarolo
Sep 9, 2021

👋 !
The worker-loader package is now officially deprecated in favor of Webpack 5 built-in web worker loading strategy.

I'm wondering: what are the plans around supporting worker-loader's configuration options in Webpack 5 (if any)?

From my understanding, there are two main features missing:

Support inlining web workers (that I assume is covered in Inline worker in webpack 5?).
Support using publicPath for the worker bundle. I recently wrote about this in a blog post. Am I right assuming the "new" way to deal with it is by setting __webpack_public_path__ at runtime?

Thanks!

Answered by alexander-akait

Sep 9, 2021

Support inlining web workers (that I assume is covered in Inline worker in webpack 5?).

I don't think we need this in 2021, anyway it is possible to using assets/inline

Support using publicPath for the worker bundle. I recently wrote about this in a blog post. Am I right assuming the "new" way to deal with it is by setting webpack_public_path at runtime?

You can move worker to own entry and setup publicPath or use multi compiler mode

View full answer

alexander-akait · 2021-09-09T17:27:33Z

alexander-akait
Sep 9, 2021
Maintainer

Support inlining web workers (that I assume is covered in Inline worker in webpack 5?).

I don't think we need this in 2021, anyway it is possible to using assets/inline

Support using publicPath for the worker bundle. I recently wrote about this in a blog post. Am I right assuming the "new" way to deal with it is by setting webpack_public_path at runtime?

You can move worker to own entry and setup publicPath or use multi compiler mode

6 replies

alexander-akait Sep 9, 2021
Maintainer

You can write something like:

try {
  new Worker(new URL('./my.worker.js', import.meta.url));
} catch (error) {
  const URL = new URL('./my.worker.js?fallback', import.meta.url);
  
  // Logic for data/inline
}

And register asset/inline type for resourceQuery: /fallback/ like here https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax

AprilArcus Sep 10, 2021

I followed these instructions and received Uncaught ReferenceError: require is not defined.

The base64 encoded script starts with

"use strict";

require("core-js/modules/es.array.slice.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.symbol.js");

require("core-js/modules/es.symbol.description.js");

AprilArcus Sep 10, 2021

I don't think we need this in 2021, anyway it is possible to using assets/inline

I need this to instantiate workers hosted on a CDN.

ShuZhong Mar 14, 2024

In latest webpack, that's a workerPublicPath to override publicPath in worker use.
we can set publicPath: 'https://www.cdn.com and workerPublicPath: '/' to solve CORS errors.

https://webpack.js.org/configuration/output/#outputworkerpublicpath

CraigglesO Mar 15, 2024

This works! I had to do publicPath: 'https://www.cdn.com and workerPublicPath: 'https://www.cdn.com (They had to be the same url) myself. But other then that blown away and really happy this works. Supposedly it was around since 5.77.0 boy did i miss out. Appreciate you posting this. Saved me a lot of kB as well.

alexander-akait · 2021-09-11T12:26:44Z

alexander-akait
Sep 11, 2021
Maintainer

How can I help?

Example required for

publicPath
inline worker fallback where worker doesn't supported

11 replies

chyzwar Oct 17, 2021

@alexander-akait @see https://github.com/chyzwar/webpack-inline-woker this should illustrate the issue.

zenotsai Oct 18, 2021

I'm having the same problem upgrading webpack5 @chyzwar @alexander-akait

alexander-akait Oct 21, 2021
Maintainer

@chyzwar solved, to be honestly it is not related to inline loader

alexander-akait Oct 21, 2021
Maintainer

@chyzwar

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent Page</title>
</head>
<body>
    <h1>Parent application</h1>
    <div id="root"></div>
    <script src="http://localhost:8080/main.js"></script>
</body>
</html>

package.json

{
  "name": "@project/test-inline-workers",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "16.x.x",
    "yarn": "1.x.x"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-refresh": "^0.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
    "@types/webpack-manifest-plugin": "^3.0.5",
    "@types/node": "^16.11.1",
    "@types/react": "^17.0.30",
    "@types/react-dom": "^17.0.9",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0",
    "ts-node": "^10.3.0",
    "http-server": "^14.0.0",
    "source-map-loader": "^3.0.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.4",
    "webpack-manifest-plugin": "^4.0.2",
    "webpack": "^5.59.0",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
  },
  "scripts": {
    "start:webpack": "webpack serve --config webpack.dev.ts",
    "start:server": "http-server . --proxy http://127.0.0.1:4000",
    "start": "yarn start:webpack & yarn start:server"
  },
  "browserslist": {
    "production": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

webpack.config.js

import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
import type {Configuration} from "webpack";
import {ProvidePlugin, HotModuleReplacementPlugin} from "webpack";
import {resolve} from "path";
import { WebpackManifestPlugin } from 'webpack-manifest-plugin';

interface DevServerConfiguration {
  devServer: {
    port?: number;
    host?: string;
    allowedHosts?: string;
    historyApiFallback?: boolean;
    client?: {
      webSocketURL: {
        hostname: string;
        pathname: string
        port: number;
      }
    }
    headers?: {
      [key: string]: string;
    }
  }
}

const config: Configuration & DevServerConfiguration= {
  mode: "development",
  devtool: "inline-source-map",
  context: resolve(__dirname),
  entry: {
    main: resolve("./src/index.tsx"),
  },
  output: {
    path: resolve("build"),
    library: 'library', 
    crossOriginLoading: "anonymous",  
    uniqueName: 'library',
    umdNamedDefine: true,
    libraryTarget: 'umd',
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  target: "web",
  devServer: {
    port: 4000,
    host: "127.0.0.1",
    allowedHosts: 'all',
    historyApiFallback: true,
  },
  optimization: {
    runtimeChunk: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre",
      },
      {
        test: /(\.tsx|\.ts)$/,
        include: [
          resolve(__dirname, "./src"),
        ],
        use: [
          { 
            loader: "babel-loader", 
            options: {plugins: ["react-refresh/babel"]}
          },
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
              projectReferences: true,
              experimentalFileCaching: true,
              configFile: "tsconfig.json",
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new WebpackManifestPlugin({}),
    new ProvidePlugin({
      React:     "react",
      ReactDOM:  "react-dom",
    }),
    new ReactRefreshWebpackPlugin(),
  ],
};

export default config;

alexander-akait Oct 21, 2021
Maintainer

Shorty - just proxy dev server, it is some weird, actually http-server in your case before webpack-dev-server, so it will be right to proxy all request to webpack-dev-server and due changeOrigin (the option used inside http-server) you will get the valid origin and you don't need CORS in this way

CraigglesO · 2021-10-17T15:30:25Z

CraigglesO
Oct 17, 2021

Here is a good explanation on the problem and potential solution.

edit -
@alexander-akait - is it possible to create a loader for such a use case? Personally, I'd rather the scripts live separately, and the app fetch the workers using CORS.

1 reply

alexander-akait Oct 17, 2021
Maintainer

@CraigglesO You can use multi compiler mode with target: 'webworker' and load them from your application using absolve URL (proxy for local development)

alexander-akait · 2021-10-21T12:53:25Z

alexander-akait
Oct 21, 2021
Maintainer

I see two things here:

problem with dev server
old browser support

Yes, inline loader can solve both them, but do you real need support old browsers? Anyway I provide two solutions here:

for dev server, just proxy - Feature parity with `worker-loader` #14198 (reply in thread)
inline loader -

webpack.config.js

// ...
{
  resourceQuery: /raw/,
  // Note you can use `asset/inline` for very old browser supports, but you will increase bundle size
  type: 'asset/resource',
  use: [
    {
      loader: "babel-loader",
      options: {}
    },
    // Canb e removed if you don't have ts
    {
      loader: "ts-loader",
      options: {}
     }
  ]
} 
// ...

in source code just crreate

const createWorker = () => {
  if (process.env.NODE_ENV === 'development') {
    const data = new URL('./worker?raw', import.meta.url);
    
    // Can polyfill it, if you don't want, use something old to download file
    fetch(data)
        .then(response => response.blob())
        .then((blob) => {
          const objectURL = URL.createObjectURL(blob);
          
          new Worker(objectURL);

          URL.revokeObjectURL(objectURL);
    })
  } else {
    new Worker(new URL('./worker', import.meta.url))
  }
}

Technique from above can be improved for production usage, for example:

Using data URI for very old browser (note you will increase bundle size)
Creating data URI from fetched source and pass it to new Worker, if blob is not supported
Using const isDevEnvOrOldBrowser = process.env.NODE_ENV === 'development' || typeof Worker === "undefined";

Also you can always use multi compiler mode and bundle worker with target: 'webworker'.

Anyway feel free to feedback

7 replies

alexander-akait Oct 21, 2021
Maintainer

@AprilArcus Why do not use blob?

AprilArcus Oct 21, 2021

We serve our bundle from a CDN and it runs afoul of the same origin policy.

alexander-akait Oct 21, 2021
Maintainer

In this case you can use target: 'webworker' and multi compiler mode

zlk89 Jul 9, 2022

I tried this script, but it seems webpack didn't transpile the code for me.

Akimotorakiyu Nov 18, 2022

not work for me.

piotr-oles · 2021-11-05T06:59:33Z

piotr-oles
Nov 5, 2021

In case someone find it interesting, I found another solution to the CORS issue: #14648 (comment)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature parity with `worker-loader` #14198

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 25 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Feature parity with worker-loader #14198

Replies: 5 comments · 25 replies

alexander-akait Sep 9, 2021 Maintainer

alexander-akait Sep 9, 2021 Maintainer

alexander-akait Sep 11, 2021 Maintainer

alexander-akait Oct 21, 2021 Maintainer

alexander-akait Oct 21, 2021 Maintainer

alexander-akait Oct 21, 2021 Maintainer

alexander-akait Oct 17, 2021 Maintainer

alexander-akait Oct 21, 2021 Maintainer

alexander-akait Oct 21, 2021 Maintainer

alexander-akait Oct 21, 2021 Maintainer

Feature parity with `worker-loader` #14198

Replies: 5 comments 25 replies

alexander-akait
Sep 9, 2021
Maintainer

alexander-akait Sep 9, 2021
Maintainer

alexander-akait
Sep 11, 2021
Maintainer

alexander-akait Oct 21, 2021
Maintainer

alexander-akait Oct 21, 2021
Maintainer

alexander-akait Oct 21, 2021
Maintainer

alexander-akait Oct 17, 2021
Maintainer

alexander-akait
Oct 21, 2021
Maintainer

alexander-akait Oct 21, 2021
Maintainer

alexander-akait Oct 21, 2021
Maintainer