webpack worker-loader 引入worker文件

最新推荐文章于 2024-08-09 07:14:16 发布
最新推荐文章于 2024-08-09 07:14:16 发布
阅读量903 收藏
点赞数
文章标签： java python vue javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122064813
版权
本文介绍了如何使用webpack的worker-loader来引入并创建worker文件，相较于行内url-loader，这种方式更方便且避免了require函数的问题。然而，尝试在worker中导入其他文件时遇到错误，导致worker无法正常工作。尽管理论上worker应该可以独立并导入其他函数，但实际操作中遇到的错误由于没有明确的行号提示，使得排查变得困难。
摘要由CSDN通过智能技术生成

原文链接: webpack worker-loader 引入worker文件

上一篇: 使用worker异步处理canvas

下一篇: web判断图片类型 , 将file对象转换成buffer对象

比行内url-loader引入要方便很多, 并且不会出现require函数找不到的问题 

import IWorker from "worker-loader!./worker.js"
let worker = new IWorker()

理论上这样引入完全可以将worker文件剥离出来, 并且worker中也可以引入其他文件中的函数

但是好像不行, 只要在worker中import 了其他文件, 就报错.....

up-e3734e78897fd5d57c2bcce24dcd0481dc8.png

emm, 好像是代码哪里写错了, 不过这个也很难受, 因为出错不显示行号, 只能一行一行去查

阿豪boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 中使用 worker-loader 及遇到的问题
Amy的博客
08-05 1万+
Web Worker 使用教程 Worker - Web API 接口参考 | MDN 版本 Vue CLI 3 webpack 4 worker-loader 3 vue-cli3 中依赖的 webpack 版本是 "webpack": "^4.0.0"，而 "worker-loader": "^3.0.0" 要求的 webpack 版本是 4 | 5。 使用前要检查下各个依赖对应版本，不然会引发一些错误。 不同版本配置文件会有所不同，后面介绍。 使用 参考：vue中使用web worker webp
webworker-loader:用于 webpack 的 Web Worker 加载器
06-21
webpack 的工作加载器 用法 var MyWorker = require ( "worker!./file.js" ) ; var worker = new MyWorker ( ) ; worker . postMessage ( { a : 1 } ) ; worker . onmessage = function ( event ) { ... } ; worker . addEventListener ( "message" , function ( event ) { ... } ) ; 执照 麻省理工学院（ ）
怎么在 ES6+Webpack 下使用 Web Worker
weixin_33814685的博客
04-12 1600
大家都知道 HTML 5 新增了很多 API，其中就包括 Web Worker，在普通的 js 文件上使用 ES5 编写相关代码应该是完全没有问题了，只需要在支持 H5 的浏览器上就能跑起来。 那如果我们需要在 ES6+Webpack 的组合环境下使用 Web Worker呢？其实也很方便，只需要注意一下个别点，接下来记录一下我踩过的坑。 至于 Web Worker 的基础知识和基本 api 我就...
worker-loader使用教程
最新发布
gitblog_00249的博客
08-09 943
worker-loader使用教程 worker-loaderA webpack loader that registers a script as a Web Worker项目地址:https://gitcode.com/gh_mirrors/wo/worker-loader 1. 项目介绍 worker-loader是为Webpack设计的一个加载器，它允许你轻松地在Web Workers中...
如何在Webpack打包的项目中使用Web Worker
马骏超的博客
05-24 8850
如何在Webpack打包的项目中使用Web Worker 因为项目中涉及到大量的计算,传统的JavaScript中计算的话会阻塞浏览器.使用Web Worker势在必得! 主要使用教程非常简单，共分为三个部分: 安装 项目工程目录下安装loader,目地是让Webpack识别worker文件 npm install -D worker-loader 配置webpack文件 ...
探索Webpack的新助手：Worker-Loader
gitblog_00054的博客
03-25 615
探索Webpack的新助手：Worker-Loader worker-loaderA webpack loader that registers a script as a Web Worker项目地址:https://gitcode.com/gh_mirrors/wo/worker-loader 是一个由Webpack社区贡献的加载器，旨在简化Web Worker的集成过程。在前端开发中，We...
还没使用过Web Worker? 推荐一款开源工具Workerize-Loader，让你在webpack项目中轻松使用Web Worker
YunWisdom
07-24 968
还没使用过Web Worker? 推荐一款开源工具Workerize-Loader，让你在webpack项目中轻松使用Web Worker Workerize-Loader 将模块及其依赖项移动到 Web 辅助角色的 Web 包加载程序，自动将导出的函数反映为异步代理。 将一个小型、专门构建的 RPC 实现捆绑到应用中 如果导出的模块方法已异步，则签名保持不变 支持同步和异步工作函数 与异步/等待效果优美 导入的值是可实例化的，只是一个装饰Worker 安装 npm in..
es6事件响应与处理机制 html5,ES6+Webpack 下使用 Web Worker
weixin_33859135的博客
06-05 594
大家都知道 HTML 5 新增了很多 API，其中就包括 Web Worker，在普通的 js 文件上使用 ES5 编写相关代码应该是完全没有问题了，只需要在支持 H5 的浏览器上就能跑起来。那如果我们需要在 ES6+Webpack 的组合环境下使用 Web Worker呢？其实也很方便，只需要注意一下个别点，接下来记录一下我踩过的坑。至于 Web Worker 的基础知识和基本 api 我就放到...
worker-loader:一个将脚本注册为Web Worker的Webpack加载器
05-01
首先，您需要安装worker-loader ： $ npm install worker-loader --save-dev 内联式 App.js import Worker from "worker-loader!./Worker.js" ; 设定档 webpack.config.js module . exports = { module : { ...
vue cli3 配置 worker-loader 使用worker
阿豪
05-07 1387
原文链接: vue cli3 配置 worker-loader 使用worker ...
workers:一个用于在Angular中轻松使用Web Workers API的库
05-24
Angular的Web Workers API 部分 这是一个库，用于在Angular中轻松使用 。 安装 如果您没有 ： npm i @ng-web-apis/common 现在安装软件包： npm i @ng-web-apis/workers 使用方法 创建一个worker并在AsyncPipe的模板中使用它： import { WebWorker } from '@ng-web-apis/workers' ; function compute ( data : number ) : number { return data ** 2 ; } @ Component ( { template : ` Computed Result: <ng-container *ngIf="worker | async as event"
Vue项目中使用web worker报错 Uncaught SyntaxError: Unexpected token <
CSU_Zipple的博客
04-07 8380
Bug 在代码中直接使用worker会报错，如下图所示 Solution
vue中使用webWorker worker-loader配置
qq_51389137的博客
06-10 3342
添加 chainWebpack的一段路径解析（关于chainWebpack为webpack的配置同extendWebpack相同），添加了解析配置后，worker-loader就可以解析后缀为 worker.js的js文件为worker对象了。3.在src文件夹下创建一个存放所有worker文件的文件夹workers，创建一个子线程js文件 test.worker.js。quasar cli中 quasar.config.js的build对象中。vue.config.js中配置。
Vue + WebWorker 实践
zg97zb的博客
12-23 1757
web worker在vue.js中的使用
Webpack 下使用 web workers 及 基本原理 和 应用场景
_
03-24 2172
阅读目录 一：web workers的基本原理 二：web Workers 的基本用法 三：在webpack中配置 Web Workers 四：Web Worker的应用场景 回到顶部 一：web workers的基本原理 我们都知道，我们的javascript采用的是单线程模型，所有的任务都在一个主线程中完成，一次只能执行一个任务，如果有多个任务需要被执行的话，那么后面的任务会依次排队等着，那么这种情况下，如果我们需要处理大量的计算逻辑的时候，那么就会比较耗时，那么用户界面就很有可能出现假死的
学习Web Worker
to_the_Future的博客
06-20 1543
Web Worker和Service Worker都是用于在浏览器中执行JavaScript代码的机制，它们都可以在后台线程中执行脚本，从而避免了主线程被阻塞的问题，提高了Web应用程序的性能和响应速度。Service Worker是一种用于在浏览器中执行脚本的机制，它可以在浏览器和网络之间建立一个中间层，用于处理网络请求和响应。向Worker发送消息：在Worker线程中，可以通过监听message事件来接收主线程发送的消息，然后通过调用postMessage()方法向主线程发送消息。
chainWebpack配置WebWorkers
好好学习
02-20 3232
WebWorker作为浏览器开启子线程的一种新方式，Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。 一、UmiJS中配置使用WebWorkers在chainWebpack里面基于worker-plugin配置首先 npm 依赖 npm install -D worker-plugin config.ts文件里配置chainWebpack中配置 import WorkerPlugin from 'worker-plugin'; export d
使用worker-loader在vue中使用worker，并且兼容ie11
热门推荐
gdutRex的博客
01-06 1万+
worker 多线程可以让网页进行大量数据处理的时候，避免UI渲染阻塞。 我这次使用woker来进行数据的预先获取数据并且处理 由于数据预计会比较多，如果一次性获取的话，UI渲染就会阻塞，导致用户体验下降。 案例 MDN上介绍以及非常详细 由于woker不支持file路径，所以一般都是讲文件布置到服务器生成一个url，但是在开发过程中这样太不方便了，所以webpack上有一个loader:work...
peerDependencies WARNING vue-pdf@4.3.0 › worker-loader@^2.0.0 requires a peer of webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0 but D:\phpstudy_pro\WWW\VueModule\vue02\node_modules\webpack was installed at webpack@5.75.0, packageDir: D:\phpstudy_pro\WWW\VueModule\vue02\node_modules\.store\worker-loader@2.0.0\node_modules\worker-loader Recently updated (since 2023-06-04): 1 packages (detail see file D:\phpstudy_pro\WWW\VueModule\vue02\node_modules\.recently_updates.txt)
06-12
这是一个关于peerDependencies的警告，意思是vue-pdf@4.3.0依赖worker-loader@^2.0.0，而worker-loader@^2.0.0依赖webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0，但是你安装的webpack版本是webpack@5.75.0。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值