diff --git a/src/content/configuration/resolve.mdx b/src/content/configuration/resolve.mdx index 6b15ecd23bc7..e2d4be21c48f 100644 --- a/src/content/configuration/resolve.mdx +++ b/src/content/configuration/resolve.mdx @@ -23,6 +23,23 @@ contributors: These options change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Have a look at [Module Resolution](/concepts/module-resolution) for more explanation of how the resolver works. +### Default Values + +Webpack automatically sets useful defaults for `resolve` options depending on the target environment. + +#### **Default `resolve` configuration** + +````js +{ + extensions: ['.js', '.json', '.wasm'], + modules: ['node_modules'], + mainFiles: ['index'], + mainFields: ['browser', 'module', 'main'], + aliasFields: ['browser'], + conditionNames: ['webpack', 'module', 'import', 'require', 'node'], + cacheWithContext: false +} + ## resolve `object` @@ -38,7 +55,7 @@ module.exports = { // configuration options }, }; -``` +```` ### resolve.alias diff --git a/src/content/guides/web-workers.mdx b/src/content/guides/web-workers.mdx index 66be82bb2518..c98f632c7ee3 100644 --- a/src/content/guides/web-workers.mdx +++ b/src/content/guides/web-workers.mdx @@ -52,11 +52,46 @@ self.onmessage = ({ data: { question } }) => { }; ``` +--- + +## Cross-Domain Workers + +Webpack 5 allows workers to be hosted on a different domain. +This is useful when your main app and workers are deployed separately. + +### Example (Main Thread) + +```js +const worker = new Worker( + new URL('https://example.com/worker.js', import.meta.url), + { type: 'module' } +); + +worker.onmessage = ({ data }) => { + console.log('Message from worker:', data); +}; +``` + +### Example (Worker Code) + +```js +self.postMessage('Hello from cross-domain worker'); +``` + +### Full Examples + +- Main thread: https://github.com/webpack/webpack/tree/main/examples/cross-origin-main-thread +- Host: https://github.com/webpack/webpack/tree/main/examples/cross-origin-host +- Worker: https://github.com/webpack/webpack/tree/main/examples/cross-origin-worker + +--- + ## Set a public path from a variable -When you set `__webpack_public_path__` from a variable, and use `publicPath` equal to `auto`, worker chunks will get a separate runtime, and Webpack runtime will set `publicPath` to automatically calculated public path, that is probably is not what you expect. +When using a dynamic public path with `publicPath: "auto"`, workers receive their own runtime. +Webpack may calculate the public path incorrectly if your application uses a CDN or a different deployment origin. -To work around this issue, you need to set `__webpack_public_path__` from within the worker code. Here is an example: +To avoid this, set `__webpack_public_path__` inside the worker before loading other modules. **worker.js** @@ -67,7 +102,7 @@ self.onmessage = ({ data: { publicPath, ...otherData } }) => { } // rest of the worker code -} +}; ``` **app.js** @@ -77,6 +112,8 @@ const worker = new Worker(new URL('./worker.js', import.meta.url)); worker.postMessage({ publicPath: window.__MY_GLOBAL_PUBLIC_PATH_VAR__ }); ``` +--- + ## Node.js Similar syntax is supported in Node.js (>= 12.17.0): @@ -88,3 +125,38 @@ new Worker(new URL('./worker.js', import.meta.url)); ``` Note that this is only available in ESM. `Worker` in CommonJS syntax is not supported by either webpack or Node.js. + +--- + +## Multi-Compiler Mode + +When using multiple Webpack configurations (multi-compiler mode), each worker entry may produce its own separate runtime. +You must load the correct output file based on the compiler that generated it. + +### Example + +**webpack.config.js** + +```js +module.exports = [ + { + name: 'main', + entry: './src/index.js', + output: { filename: 'main-bundle.js' }, + }, + { + name: 'worker', + entry: './src/worker.js', + target: 'webworker', + output: { filename: 'worker-bundle.js' }, + }, +]; +``` + +### Creating the Worker + +```js +const worker = new Worker(new URL('./worker-bundle.js', import.meta.url), { + type: 'module', +}); +```