Merge pull request #82 from GoogleChromeLabs/custom-name

Custom filename and chunkFilename support
GoogleChromeLabs · Jun 23, 2020 · 00a3810 · 00a3810
2 parents a614872 + 9ad73cc
commit 00a3810
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 2 deletions.
diff --git a/src/loader.js b/src/loader.js
@@ -40,8 +40,8 @@ export function pitch (request) {
   const options = loaderUtils.getOptions(this) || {};
   const chunkFilename = compilerOptions.output.chunkFilename.replace(/\.([a-z]+)(\?.+)?$/i, '.worker.$1$2');
   const workerOptions = {
-    filename: chunkFilename.replace(/\[(?:chunkhash|contenthash)(:\d+(?::\d+)?)?\]/g, '[hash$1]'),
-    chunkFilename,
+    filename: (options.filename || pluginOptions.filename || chunkFilename).replace(/\[(?:chunkhash|contenthash)(:\d+(?::\d+)?)?\]/g, '[hash$1]'),
+    chunkFilename: options.chunkFilename || pluginOptions.chunkFilename || chunkFilename,
     globalObject: pluginOptions.globalObject || 'self'
   };
 

diff --git a/test/fixtures/code-splitting/dep.js b/test/fixtures/code-splitting/dep.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+export const foo = 'bar';
diff --git a/test/fixtures/code-splitting/entry.js b/test/fixtures/code-splitting/entry.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+const worker = new Worker('./worker', { type: 'module' });
+worker.onmessage = ({ data }) => {
+  console.log('page got data: ', data);
+};
+worker.postMessage('hello');
diff --git a/test/fixtures/code-splitting/index.html b/test/fixtures/code-splitting/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html><body>
+  <!--
+ Copyright 2018 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ use this file except in compliance with the License. You may obtain a copy of
+ the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations under
+ the License.
+  -->
+  <script src="dist/main.js"></script>
+</body></html>
diff --git a/test/fixtures/code-splitting/worker.js b/test/fixtures/code-splitting/worker.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+console.log('hello from worker');
+
+addEventListener('message', ({ data }) => {
+  console.log('worker got message', data);
+  import('./dep').then(m => {
+    if (data === 'hello') {
+      postMessage(m.foo);
+    }
+  });
+});
diff --git a/test/index.test.js b/test/index.test.js
@@ -140,6 +140,58 @@ describe('worker-plugin', () => {
     expect(stats.assets['main.js']).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"foo\.[a-zA-Z0-9]+\.worker\.js"/g);
   });
 
+  describe('options.filename / options.chunkFilename', () => {
+    test('it uses the provided filename when specified', async () => {
+      const stats = await runWebpack('named', {
+        plugins: [
+          new WorkerPlugin({
+            filename: 'my-custom-name.[hash:3].js'
+          })
+        ]
+      });
+
+      const assetNames = Object.keys(stats.assets);
+      expect(assetNames).toHaveLength(2);
+      expect(assetNames).toContainEqual(expect.stringMatching(/^my-custom-name\.[a-zA-Z0-9]{3}\.js$/));
+      expect(stats.assets['main.js']).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"my-custom-name\.[a-zA-Z0-9]{3}\.js"/g);
+    });
+
+    test('it supports [name] in filename templates', async () => {
+      const stats = await runWebpack('named', {
+        plugins: [
+          new WorkerPlugin({
+            filename: '[name]_worker.js'
+          })
+        ]
+      });
+
+      const assetNames = Object.keys(stats.assets);
+      expect(assetNames).toHaveLength(2);
+      expect(assetNames).toContainEqual(expect.stringMatching(/^foo_worker\.js$/));
+      expect(stats.assets['main.js']).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"foo_worker\.js"/g);
+    });
+
+    test('it supports custom chunkFilename templates when code-splitting', async () => {
+      const stats = await runWebpack('code-splitting', {
+        output: {
+          publicPath: '/dist/'
+        },
+        plugins: [
+          new WorkerPlugin({
+            filename: 'worker.js',
+            chunkFilename: '[id]_worker_chunk.js'
+          })
+        ]
+      });
+
+      const assetNames = Object.keys(stats.assets);
+      expect(assetNames).toHaveLength(3);
+      expect(assetNames).toContainEqual(expect.stringMatching(/^worker\.js$/));
+      expect(assetNames).toContainEqual(expect.stringMatching(/^1_worker_chunk\.js$/));
+      expect(stats.assets['main.js']).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"worker\.js"/g);
+    });
+  });
+
   test('it bundles WASM file which imported dynamically', async () => {
     const stats = await runWebpack('wasm', {
       plugins: [