qiankun下webpack使用webworker问题记录

参考资料

报错

在qiankun微前端webpack配置下使用webworker时报错:

shell

Error in mounted hook: "SecurityError: Failed to construct 'Worker': Script at 'http://localhost:xxx/xxx.worker.worker.js'" cannot be accessed from origin 'htttp://localhost:xx'

解决办法

原因是作为子应用的程序中使用web worker时产生了跨域导致，使用worker-loader(webpack4.x)配置时必须设置为inline,webpack5.x参考官方文档以vue-cli项目为例:

module.exports  = {
	// ...
  chainWebpack: config => {
		// ...
    config.module
      .rule('worker')
      .test(/\.worker\.js$/i)
      .use('worker-loader')
        .loader('worker-loader')
        .options({
          inline: 'fallback'
        })
        .end();
		// ...
  }
}

worker文件中importScript语法改为正常模块导入,否则需要手动作为一个entry做资源打包处理

//const origin = location.origin + 'xxx';
//self.importScripts(origin + '/xxx/xxx.js');

import xxx from "/xxx.js";

onmessage = (e) => {
	// ...
}

业务逻辑直接导入实例化即可：

import myWorker from "./runner.worker.js";

const worker = new myWorker();

worker.onmessage = e => {
	// ...
}

worker.onmessageerror = err => {
	// ...
}