Question

我正在尝试通过使用webpack的工作加载器将Web工作脚本加载到我的React应用程序中。但是，出现模块未找到错误。

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

这是我的src / index.js，它是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的网络工作者脚本

/* 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 documentation，我要做的就是将以下内容添加到我已完成的配置文件中：

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

我进一步进行了根据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应该是多余的吗？

我还应该提到我正在使用webpack开发服务器。可能是因为我缺少Webpack开发服务器的某种配置，并且没有选择我的Web Worker脚本吗？

当我似乎正确地遵循了文档说明之后，我真的无法弄清楚为什么我找不到模块错误。

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

尝试将file.worker.js移至src。这就是您要使用import Worker from "./file.worker";

查找的地方

Answer 2

尝试以下方法：

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

您需要指定哪个加载器（即 worker-loader ）将显式加载工作程序。

此外，我认为您不需要配置 publicPath 选项。

如何使用Webpack的工作程序加载程序加载Web工作程序

2 个答案: