在webpack环境下使用webWorker出现未知符号报错解决方法

最新推荐文章于 2025-03-03 18:30:22 发布

For__rows

最新推荐文章于 2025-03-03 18:30:22 发布

阅读量288

点赞数 2

文章标签： webpack 运维前端

本文链接：https://blog.youkuaiyun.com/For__rows/article/details/143491124

版权

1，在开发时在项目中使用webWorker来处理轮询请求，这样的好处就是减少主线程的渲染阻塞问题，

使用示例(环境是在webpack 的环境)

import Worker from 'worker-loader!../workers/login.work' //此处worker-loader在打包时会导出一个Worker包裹的函数
const worker = new Worker()
worker.postMessage('begin')
worker.onmessage = e => {
  console.log('get worker result ', e.data)
  worker.terminate()
}

引入Worker 通过new关键字进行实例化
给worker发送一个begin消息
监听worker处理后返回的数据

ok！就是这么简单！

2. 上面代码书写的前提条件一定是在好的webpack配置由于我用的是vuecli 所以我就书写一下我对应的配置

chainWebpack：（config）{
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end();
    config.module.rule('js').exclude.add(/\.worker\.js$/)
}

这样整的话就不会出现未知符号错误，具体的bug图片我就不展示了有问题评论区留言！！