Как обрабатывать веб-рабочих "стандартный" синтаксис с помощью webpack?

Интересно, можно ли вообще обрабатывать стандартный синтаксис Web Worker в webpack (например, var worker = new Worker('my-worker-file.js');) и как?

Я знаю о worker-loader, но насколько я понимаю, ему нужен конкретный синтаксис и он несовместим со стандартным.

Другими словами, можно ли связать этот файл с webpack без изменения кода? → https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js#L8

С browserify я бы использовал workerify, но я не могу найти все в мире веб-пак.

Ответ 1

Вы можете настроить Webpack для упаковки вашего рабочего js файла в отдельный пакет. В webpack.config.js:

{
  entry: {
    bundle: './app/main.js',
    worker: './app/my-worker-file.js'
  },
  output: {
    filename: '[name].js'
  }
  ...
}

Таким образом, вы получаете два bundle.js: bundle.js с вашим основным приложением и worker.js с рабочей точкой входа. Затем внутри вашего основного пакета вы можете new Worker('worker.js')

worker-loader основном делает то же самое. Всякий раз, когда что-то загружается через него, он создает, так сказать, отдельную запись пакета, которая автоматически называется [hash].worker.js. Затем он сохраняет это имя файла в функции, возвращаемой функцией require('worker!...'), которая просто передает его new Worker. В конце концов, это точно такой же процесс, как я описал выше, с той лишь разницей, что имя пакета управляется автоматически для вас.