我正在尝试使用 webpack 的 worker loader 将 web worker 脚本加载到我的 React 应用程序中。但是,我收到一个模块未找到错误。
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 的入口点
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 脚本
/* 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' }
}
]
}
}
我进入了指定公共(public)路径的进一步步骤,如记录 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 文件夹中查找网络 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
最佳答案
尝试以下方法:
import Worker from 'worker-loader!./file.worker.js';
您需要指定哪个加载器(即 worker-loader)将显式加载 worker。
此外,我认为您不需要配置 publicPath 选项。
关于javascript - 如何使用 webpack 的 worker loader 加载 web worker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53966156/