你如何在 Webpack 5 中使用 Web Worker？

Question

我一直在努力寻找在使用 Webpack 5 和打字稿的同时使用 Web Workers 的最佳方式。我尝试遵循 documentation，但是，当我尝试创建 Web Worker 时，遇到以下错误：

Uncaught DOMException: Worker constructor: Failed to load worker script at "d:\Project\SeamCarving\js\dist0.bundle.js"

我不确定为什么它试图从我的本地系统而不是通过开发服务器访问文件，例如：http://localhost:8080/js/dist0.bundle.js.

代码如下：

if (window.Worker) {
    let worker = new Worker(new URL("./image-worker", import.meta.url));

    worker.onmessage = function (message) {
      return receiveMessage(message);
    };

    worker.onerror = function (message) {
      console.log("ERROR: ", message.error);
      console.log(message.message, message.filename, message.lineno);
    };
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './js/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: path.resolve(__dirname, 'js')
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  devtool: 'source-map',
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: path.resolve(__dirname, '/js/dist/'),
  },
  output: {
    publicPath: path.resolve(__dirname, "js/dist/"),
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
  }
}

到目前为止我找到的所有资源都使用 worker-loader，但据我所知，Webpack 5 使它过时了。

在 GitHub 上查看完整项目。

Answer 1

我解决了我的问题，

不正确 输出块：

output: {
    publicPath: path.resolve(__dirname, "js/dist/"),
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
}

publicPath 在这种情况下设置为使用绝对路径。因此，当我通过服务器尝试运行时，它将充当 file:// 而不是通过 http://。由于 Chrome（我相信大多数现代浏览器）出于安全原因不允许您将本地文件作为脚本加载，因此它阻止了它。

最初，我认为这可能是使用 typescript 的某种问题，但是，我了解到这只是一个配置错误导致脚本始终使用绝对值。

更正输出块：

output: {
    publicPath: "js/dist/",
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
}

你如何在 Webpack 5 中使用 Web Worker？

How do you use Web Workers with Webpack 5?

javascript

typescript

webpack

webpack-dev-server

web-worker