2019/06/15/webpack-issue-in-webworker/

[utterances-bot]

记一次 webpack 打包 web worker 的 bug - scarletsky

前言 最近需要在项目中引入 web worker ，但是用 webpack 打包完后请求 worker 的时候总是会报 404 错误。 现象 这是一个很常见的配置： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const WorkerPlugin =

https://scarletsky.github.io/2019/06/15/webpack-issue-in-webworker/

[qidaneix]

哥，我问一下worker-plugin这个插件支持typescript嘛

[scarletsky]

@qidaneix 我没试过在 typescript 中用这插件，你可以试试

[qidaneix]

试了，eslint报错了。。。不知道这个插件做了什么，应该是让eslint去检查ts编译后的代码了。。。哥你看看我这么写有问题嘛？

// worker.ts
addEventListener('message', e => console.log(e));

// main.ts
const worker = new Worker('./worker.ts', { type: 'module'});
worker.postMessage({a: 1});

[scarletsky]

@qidaneix 没看到报错信息，不知道报什么错

[qidaneix]

我在内网调试，错误信息拷贝不出来，我跟你描述一下，就是一些eslint提示的代码规范的错误（改成单引号之类），但问题是我在源码里面根本没这么写，源码里写的是符合eslint代码规范要求的。所以我猜测eslint去检查编译之后的代码去了

[scarletsky]

@qidaneix 那就只能改 eslint 配置（忽略该文件）或者改 worker-plugin 源码了。。

[qidaneix]

我加了/* eslint-disable */，还是提示规范错误了，但比之前少。。。。好诡异的bug啊，我想给他们提个issue看看有没有人帮我了

[scarletsky]

@qidaneix 哈哈哈，可以试下，看看他们有什么建议

[qidaneix]

我有多试了几次，越来越诡异。我加上一些eslint规则像’airbnb-base‘之后，就会报错，等我去掉了，就不报了，而且随机发生。但我源码里任何规则都没违反。。。感觉上像是多线程的顺序错乱了一般

[scarletsky]

@qidaneix 我猜是 eslint 的 cache 导致的吧。这种报错只能自己慢慢调试的了。

[qidaneix]

哥，我再问你个事，你用worker-plugin的时候有用到web worker的importScripts吗？咋用啊，好像直接importScript('./subWork.js')不行

[scarletsky]

@qidaneix 没有，我在里面是直接 import xxx from 'xxx'的。

[scarletsky]

没有写过类似 importScript，毕竟 webpack 会自动处理这些

[qidaneix]

好的，我知道了，谢谢哥

[scarletsky]

@qidaneix
其实我 webworker 也用得不多，只是刚好有个项目里面有个比较费事的过程，然后就尝试了一下 webworker 的方案。
但那个过程里面又包含了 wasm 的东西，所以处理起来就有些麻烦。
而且后面发现用了worker plugin 之后， webpack 在 production mode 下会经常爆内存。所以后来就没用 worker plugin 了。