您如何使用 Web 工人與 Webpack 5？

Question

我一直在努力尋找在使用 Webpack 5 和 typescript 的同時使用 Web Workers 的最佳方法。 我嘗試按照文檔進行操作，但是，當我嘗試創建 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 塊：

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

在這種情況下， publicPath設置為使用絕對路徑。 因此，當我嘗試通過服務器運行它時，它將作為file://而不是http:// 。 由於 Chrome（我相信大多數現代瀏覽器）出於安全原因不允許您將本地文件作為腳本加載，因此它阻止了它。

最初，我認為使用 typescript 可能存在某種問題，但是，我了解到這只是配置錯誤，導致腳本始終使用絕對值。

更正了 output 塊：

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