Ссылочный работник относительно файла JavaScript

Question

Я использую webpack собрать проект, который использует Web Workers, Для этого я использую worker-loader погрузчик.

Я сделал минимальный план, чтобы продемонстрировать свою среду (я также вставлю код ниже для потомков).

Проблема в том, что разрешение рабочего файла не работает должным образом. Если я запускаю index.html (Я обслуживаю корневую папку с HTTP-сервером), это может разрешить ../dist/TestMain.js, но он пытается решить TestWorker.js от ./ относительно index.html, Я хотел бы разрешить ./ относительно TestMain.js,

Я пытался добавить output.publicPath = "./", но это не помогло. Я искал документацию (и worker-loader Документация) для аналогичных вариантов, но не нашел ничего, что я могу сказать, имеет отношение (я могу ошибаться).

Обычно я был бы все для использования resolve.alias, но выходные данные должны быть в состоянии поместить в любую папку (основной JS-файл и рабочий JS-файл останутся вместе в одной папке), на которую ссылается HTML-страница.

Я также видел, что я могу встроить работника, но я бы хотел этого избежать, так как это приводит к потере работника (может вызвать другие виды проблем со ссылками).

Есть ли варианты, которые мне не хватает, чтобы включить относительные ссылки, или обходной путь, который я пропустил?

Вот структура:

Project
 |- dist
 |   |- TestMain.js
 |   |- TestWorker.js
 |- src
 |   |- workers
 |   |   |- TestWorker.js
 |   |- index.js
 |- test
 |   |- index.html
 |- webpack.config.js

Вот мой webpack.config.js:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "TestMain.js",
    path: path.resolve(__dirname, "dist"),
    library: "MyLib",
    libraryTarget: "umd"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, "src/workers"),
        ],
        use: {
          loader: "worker-loader",
          options: {
            name: "[name].js"
          }
        }
      }
    ]
  }
};

Я поделюсь своими другими файлами, если вы хотите, но это работает, если рабочий файл находится в той же папке, что и index.html,

Answer 1

Уточнить publicPath вариант для рабочего-погрузчика:

        use: {
          loader: "worker-loader",
          options: {
            name: "[name].js",
            publicPath: "/dist"
          }
        }

В качестве альтернативы вы можете рассмотреть возможность добавления в процесс сборки шага, который копирует статические ресурсы, включая index.html, в папку dist.