如何使用 webpack 的 worker loader 加载 web worker [英] How to load web worker using webpack's worker loader

问题描述

我正在尝试使用 webpack 的 worker loader 将 web worker 脚本加载到我的 React 应用程序中.但是，我收到一个未找到模块的错误.

I'm trying to load a web worker script into my React application by using webpack's worker loader. However, I get a module not found error.

./src/index.js 模块中的错误未找到:错误:无法解析'C:\Users\wyrm\Documents\Project\src' 中的 './file.worker'

ERROR in ./src/index.js Module not found: Error: Can't resolve './file.worker' in 'C:\Users\wyrm\Documents\Project\src'

这是我的 src/index.js，它是 webpack 的入口点

This is my src/index.js which is the entry point for webpack

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"));

我在 Project/public 文件夹中有名为 file.worker.js 的 Web Worker 脚本

I have my web worker script called file.worker.js in the Project/public folder

/* eslint-env worker */

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

这是我的 webpack 配置文件:

And this is my webpack config file:

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 文档，我需要做的就是将以下内容添加到我已经完成的配置文件中:

According to the webpack documentation, all I need to do is to add the following to my config file, which I have done:

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

我进一步按照文档说明指定公共路径 这里:

I went to the further step of specifying the public path as documented here:

// 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 文件夹中查找 Web Worker 脚本.在我看来，webpack 无论如何都会默认在 Project/public 文件夹中查找 web worker 脚本，所以正确地为 publicPath 指定 Project/public 应该是多余的?

But even though I have specified the publicPath to be Project/public, the error thrown seems to indicate that it's looking in the Project/src folder for the web worker script. It also seems to me that webpack looks for the web worker script in the Project/public folder by default anyway, so by right it should be redundant to specify Project/public for the publicPath?

我还应该提到我正在使用 webpack 开发服务器.可能是因为我的 webpack 开发服务器缺少某种配置，并且它没有获取我的 web worker 脚本?

I should also mention that I'm using webpack dev server. Could it be that I'm missing some sort of configuration for my webpack dev server, and it's not picking up my web worker script?

当我似乎正确地遵循了文档时，我真的不明白为什么我会收到未找到模块的错误.

I really can't figure out why I'm getting a module not found error when it seems like I've followed the documentation properly.

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

推荐答案

尝试以下方法:

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

您需要指定哪个加载器(即worker-loader)将显式加载工作器.

You need to specify which loader(i.e. worker-loader) is going to load the worker explicitly.

另外，我认为您不需要配置 publicPath 选项.

Also, i dont think you need to configure the publicPath option.

这篇关于如何使用 webpack 的 worker loader 加载 web worker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！