[英]How to load web worker using webpack's worker loader
我正在嘗試使用webpack的worker loader將Web worker腳本加載到我的React應用程序中。 但是,我得到一個模塊未找到錯誤。
./src/index.js中的錯誤找不到模塊:錯誤:無法解析'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的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 文檔 ,我需要做的就是將以下內容添加到我的配置文件中,我已經完成了:
// 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文件夾中查找Web worker腳本。 在我看來,無論如何,webpack默認在Project / public文件夾中查找web worker腳本,所以右邊為publicPath指定Project / public應該是多余的?
我還要提一下,我正在使用webpack dev服務器。 可能是因為我錯過了我的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
嘗試將file.worker.js移動到src中。 這就是你在import Worker from "./file.worker";
使用import Worker from "./file.worker";
查找它的地方import Worker from "./file.worker";
嘗試以下內容:
import Worker from 'worker-loader!./file.worker.js';
您需要指定哪個加載器(即worker-loader )將明確加載worker。
另外,我認為你不需要配置publicPath選項。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.