Web Workers
webpack 5부터는, worker-loader 없이 Web Workers를 사용할 수 있습니다.
Syntax
new Worker(new URL('./worker.js', import.meta.url));// 또는 매직 코멘트로 청크 이름을 사용자 정의하세요.
// https://webpack.js.org/api/module-methods/#magic-comments 내용을 참고하세요.
new Worker(
/* webpackChunkName: "foo-worker" */ new URL('./worker.js', import.meta.url)
);이 구문은 번들러 없이 코드를 실행할 수 있도록 선택되었으며, 브라우저의 기본 ECMAScript 모듈에서도 사용할 수 있습니다.
Worker API에서는 Worker 생성자가 스크립트의 URL을 나타내는 문자열을 허용한다고 설명하지만, webpack 5에서는 URL만 사용할 수 있다는 점에 유의하세요.
Example
src/index.js
const worker = new Worker(new URL('./deep-thought.js', import.meta.url));
worker.postMessage({
question:
'The Answer to the Ultimate Question of Life, The Universe, and Everything.',
});
worker.onmessage = ({ data: { answer } }) => {
console.log(answer);
};src/deep-thought.js
self.onmessage = ({ data: { question } }) => {
self.postMessage({
answer: 42,
});
};Set a public path from a variable
변수에서 __webpack_public_path__를 설정하고 publicPath를 auto로 설정하면, 워커 청크는 별도의 런타임을 갖게 되고, Webpack 런타임은 publicPath를 자동으로 계산된 공개 경로로 설정합니다. 이는 예상과 다를 수 있습니다.
이 문제를 해결하려면 워커 코드 내에서 __webpack_public_path__를 설정해야 합니다. 예시는 다음과 같습니다.
worker.js
self.onmessage = ({ data: { publicPath, ...otherData } }) => {
if (publicPath) {
__webpack_public_path__ = publicPath;
}
// 나머지 워커 코드
};app.js
const worker = new Worker(new URL('./worker.js', import.meta.url));
worker.postMessage({ publicPath: window.__MY_GLOBAL_PUBLIC_PATH_VAR__ });Node.js
비슷한 구문이 12.17.0 이상의 Node.js에서 지원됩니다.
import { Worker } from 'worker_threads';
new Worker(new URL('./worker.js', import.meta.url));이 구문은 ESM에서만 사용할 수 있습니다. CommonJS 구문의 Worker는 webpack 이나 Node.js 모두 지원되지 않습니다.
« Previous
TypeScript1 Contributor
