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

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

0 голосов
/ 29 декабря 2018

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

ОШИБКА в ./src/index.js Модуль не найден: Ошибка: не удается разрешить './file.worker' в 'C: \Пользователи \ 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}`);
};

И это мой конфигурационный файл веб-пакета: 

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

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

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

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

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

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

0 голосов
/ 16 мая 2019

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

...