Как загрузить веб-работника, используя рабочий загрузчик веб-пакета

Question

Я пытаюсь загрузить рабочий веб-скрипт в свое приложение React с помощью рабочего загрузчика веб-пакета. Тем не менее, я получаю модуль не найдена ошибка.

ОШИБКА в./src/index.js Модуль не найден: Ошибка: не удается разрешить "./file.worker" в "C:\Users\wyrm\Documents\Project\src"

Это мой src / index.js, который является точкой входа для веб-пакета

import React from "react";
import ReactDOM from "react-dom";
import Worker from "./file.worker";

const worker = new Worker();
worker.postMessage({ message: "Hello there" });

const Index = () => <div>Hello there General Kenobi!</div>;

ReactDOM.render(<Index />, document.getElementById("index"));

У меня есть мой веб-рабочий скрипт с именем file.worker.js в папке Project/ public

/* eslint-env worker */

onmessage = e => {
  const message = e.data;
  console.log(`[From Main]: ${message}`);
};

И это мой конфигурационный файл webpack:

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{ loader: "babel-loader" }, { loader: "eslint-loader" }]
      },
      {
        test: /\.worker\.js$/,
        use: [{ loader: "worker-loader", options: { publicPath: "/public/" } }]
      }
    ]
  },
  plugins: [htmlPlugin]
};

В соответствии с документацией веб-пакета, все, что мне нужно сделать, это добавить следующее в мой конфигурационный файл, что я и сделал:

// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

Я перешел к дальнейшему этапу указания публичного пути, как описано здесь:

// App.js
// This will cause the worker to be downloaded from `/workers/file.worker.js`
import Worker from './file.worker.js';

// webpack.config.js
{
  loader: 'worker-loader'
  options: { publicPath: '/workers/' }
}

Но даже если я указал publicPath как Project/ public, выдаваемая ошибка, похоже, указывает на то, что он ищет в папке Project/ src сценарий веб-работника. Мне также кажется, что веб-пакет ищет сценарий веб-работника в папке Project/ public по умолчанию в любом случае, поэтому по праву он должен быть избыточным для указания Project/ public для publicPath?

Я должен также упомянуть, что я использую webpack dev server. Может быть, мне не хватает какой-то конфигурации для моего сервера разработки веб-пакетов, и он не принимает мой сценарий веб-работника?

Я действительно не могу понять, почему я получаю ошибку "модуль не найден", когда мне кажется, что я правильно следовал документации.

Project directory
Project
- dist
  - index.html
  - main.js
- public
  - file.worker.js
- src
  - index.html
  - index.js
- .babelrc
- .eslintrc.json
- package.json
- webpack.config.js

Answer 1

Попробуйте следующее:

import Worker from 'worker-loader!./file.worker.js';

Вам нужно указать, какой загрузчик (например, рабочий-загрузчик) будет явно загружать рабочего.

Кроме того, я не думаю, что вам нужно настраивать параметр publicPath.

Answer 2

Попробуйте переместить файл file.worker.js в src. Вот где вы это ищете сimport Worker from "./file.worker";