diff --git a/README.md b/README.md index df4dee2..f2d3112 100644 --- a/README.md +++ b/README.md @@ -156,6 +156,12 @@ Similarly, if you need to have WorkerPlugin output a specific `type` value, use ] ``` +### `chunkFilename` _(string)_ + +By default this plugin will output assets according to parent `output.chunkFilename` setting (with chunk `[name]` being `WORKERNAME.worker`). + +If you want another pattern (e.g. constant, no hash) for your workers, you may override this default behavior with a pattern of your choosing. + ## Loader At its core, worker-plugin provides two features: parsing and handling of `new Worker()`, and standalone bundling of modules for use in a different JavaScript context. @@ -165,7 +171,7 @@ If all you want is to compile separate bundles for a module, `worker-plugin/load ```js import workerUrl from 'worker-plugin/loader!./my-worker'; -console.log(workerUrl); // "/0.worker.js" +console.log(workerUrl); // "/worker.js" CSS.paintWorklet.addModule(workerUrl); ``` @@ -180,7 +186,7 @@ Two options are available: Options can be supplied inline: ```js -import url from 'worker-plugin/loader?name=foo&esModule!./foo'; +import url from 'worker-plugin/loader?name=foo&esModule!./foo'; // "/foo.worker.js" ``` ... or by setting up a loader alias: diff --git a/src/index.js b/src/index.js index 559c17b..f2501ab 100644 --- a/src/index.js +++ b/src/index.js @@ -86,7 +86,8 @@ export default class WorkerPlugin { const isStrictModule = esModule || (parser.state.buildMeta && parser.state.buildMeta.strictHarmonyModule); // Querystring-encoded loader prefix (faster/cleaner than JSON parameters): - const loaderRequest = `${workerLoader}?name=${encodeURIComponent(opts.name || workerId)}${isStrictModule ? '&esModule' : ''}!${dep.string}`; + const workerName = `${opts.name || workerId}.worker`; + const loaderRequest = `${workerLoader}?name=${encodeURIComponent(workerName)}${isStrictModule ? '&esModule' : ''}!${dep.string}`; // Unique ID for the worker URL variable: const id = `__webpack__worker__${workerId++}`; diff --git a/src/loader.js b/src/loader.js index 348af81..b9b8138 100644 --- a/src/loader.js +++ b/src/loader.js @@ -38,6 +38,7 @@ export function pitch (request) { } const options = loaderUtils.getOptions(this) || {}; + const chunkName = options.name || 'worker'; const chunkFilename = compilerOptions.output.chunkFilename.replace(/\.([a-z]+)(\?.+)?$/i, '.worker.$1$2'); const workerOptions = { filename: (options.filename || pluginOptions.filename || chunkFilename).replace(/\[(?:chunkhash|contenthash)(:\d+(?::\d+)?)?\]/g, '[hash$1]'), @@ -62,7 +63,7 @@ export function pitch (request) { (new FetchCompileWasmTemplatePlugin({ mangleImports: compilerOptions.optimization.mangleWasmImports })).apply(workerCompiler); - (new SingleEntryPlugin(this.context, request, options.name)).apply(workerCompiler); + (new SingleEntryPlugin(this.context, request, chunkName)).apply(workerCompiler); const subCache = `subcache ${__dirname} ${request}`; workerCompiler.hooks.compilation.tap(NAME, compilation => { diff --git a/test/index.test.js b/test/index.test.js index 74e459b..6f5c607 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -136,8 +136,8 @@ describe('worker-plugin', () => { const assetNames = Object.keys(stats.assets); expect(assetNames).toHaveLength(2); - expect(assetNames).toContainEqual(expect.stringMatching(/^foo\.[a-zA-Z0-9]+\.worker\.js$/)); - expect(stats.assets['main.js']).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"foo\.[a-zA-Z0-9]+\.worker\.js"/g); + expect(assetNames).toContainEqual(expect.stringMatching(/^foo\.worker\.[a-zA-Z0-9]+\.js$/)); + expect(stats.assets['main.js']).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"foo\.worker\.[a-zA-Z0-9]+\.js"/g); }); describe('options.filename / options.chunkFilename', () => { @@ -309,7 +309,7 @@ describe('worker-plugin', () => { const assetNames = Object.keys(stats.assets); expect(assetNames).toHaveLength(2); - expect(assetNames).toContainEqual('0.worker.js'); + expect(assetNames).toContainEqual('worker.js'); const main = stats.assets['main.js']; expect(main).toMatch(/[^\n]*console.log\s*\([^)]*\)[^\n]*/g); @@ -317,7 +317,7 @@ describe('worker-plugin', () => { const log = main.match(/\bconsole\.log\s*\(([^)]*)\)[^\n]*/)[1]; expect(log).toMatch(/worker_plugin_loader_worker__WEBPACK_IMPORTED_MODULE_\d___default.[a-z0-9]+/gi); - expect(main).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"0\.worker\.js"/g); + expect(main).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"worker\.js"/g); }); });