如何使用webpack打包webworker

使用webpack打包webworker有如下两种方式：

• webworkify-webpack（推荐）

// main.js
import work from 'webworkify-webpack';
const wareWorker = work(require.resolve('./workers/ware.js'));
// 发送消息
wareWorker.postMessage(data);
// 接收消息
wareWorker.onmessage = data => {
// code...
};
// 错误
wareWorker.onerror = event => {
    // code...
}
// 关闭进程
wareWorker.terminate();

// ware.js
export default function (self) {
    // 接收消息
    self.onmessage = function(data) {
        // code...
    }
    // 发送消息
    self.postMessage(data);
}

• worker-loader

文档地址

子进程文件以.worker.js结束，在配置loader时匹配此规则，指定相应loader即可。

// vue.config.js
chainWebpack: config => {
      config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .tap(options => ({
        inline: true,
        fallback: false
        // name: '[name].[hash:5].js',
        // publicPath: '/workers/'
      }))
      .end();
  }