From 5df6c869e904da8285b81773a6e1ab52d75eb6c6 Mon Sep 17 00:00:00 2001 From: Peter Kerpedjiev Date: Sat, 13 Feb 2021 11:20:45 -0800 Subject: [PATCH 1/3] Updated the docs with an example of how to build a blobworker. --- docs/usage.md | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/docs/usage.md b/docs/usage.md index 32b58459..a5a80596 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -151,7 +151,7 @@ The `BlobWorker` class works just like the regular `Worker` class, but instead o There is also a convenience function `BlobWorker.fromText()` that creates a new `BlobWorker`, but allows you to pass a source string instead of a binary buffer. -Here is a webpack-based example, leveraging the `raw-loader` to inline the worker code. The worker code that we load using the `raw-loader` is the content of bundles that have been created by two previous webpack runs: one worker build targetting node.js, one for web browsers. +Here is a webpack-based example, leveraging the `raw-loader` to inline the worker code. ```js import { spawn, BlobWorker } from "threads" @@ -164,6 +164,51 @@ const worker = await spawn(BlobWorker.fromText(MyWorker)) // Now use this worker as always ``` +This can be used with a two-config webpack configuration to create the single bundle. The first config builds the worker and the second builds the library that uses it. The two can be linked together using the `WaitPlugin` described in [this article](https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/). Example `webpack.config.js`: + +``` +class WaitPlugin extends WebpackBeforeBuildPlugin { + // see https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/ + // for implementation +} + +const workerConfig = { + output: { + filename: 'worker.js', + path: path.resolve(__dirname, 'dist'), + }, + entry: path.resolve(__dirname, 'src/worker'), + target: 'webworker', + plugins: [new UnminifiedWebpackPlugin(), new ThreadsPlugin()], +}; + +const libraryConfig = { + output: { + filename: 'library.min.js', + library: 'library', + libraryTarget: 'umd', + path: path.resolve(__dirname, 'dist'), + }, + devServer: { + port: 8077, + writeToDisk: true, // necessary to ensure worker gets built and incorporated + }, + ... + plugins: [ + new HtmlWebPackPlugin({ + template: './src/index.html', + filename: './index.html', + }), + new UnminifiedWebpackPlugin(), + new ThreadsPlugin(), + new WaitPlugin('dist/worker.js'), + ], +} + +module.exports = [workerConfig, libraryConfig]; + +``` + Bundle this module and you will obtain a stand-alone bundle that has its worker inlined. This is particularly useful for libraries using threads.js. ## TypeScript From c75d83124e51b97bc362c8ce3fa134c1ec9e193e Mon Sep 17 00:00:00 2001 From: Peter Kerpedjiev Date: Sat, 13 Feb 2021 11:22:02 -0800 Subject: [PATCH 2/3] More doc updates --- docs/usage.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index a5a80596..f3db72d6 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -166,7 +166,7 @@ const worker = await spawn(BlobWorker.fromText(MyWorker)) This can be used with a two-config webpack configuration to create the single bundle. The first config builds the worker and the second builds the library that uses it. The two can be linked together using the `WaitPlugin` described in [this article](https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/). Example `webpack.config.js`: -``` +```js class WaitPlugin extends WebpackBeforeBuildPlugin { // see https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/ // for implementation @@ -190,18 +190,12 @@ const libraryConfig = { path: path.resolve(__dirname, 'dist'), }, devServer: { - port: 8077, writeToDisk: true, // necessary to ensure worker gets built and incorporated }, ... plugins: [ - new HtmlWebPackPlugin({ - template: './src/index.html', - filename: './index.html', - }), - new UnminifiedWebpackPlugin(), new ThreadsPlugin(), - new WaitPlugin('dist/worker.js'), + new WaitPlugin('dist/worker.js'), // wait for the worker to get built ], } From 8732f443be344900eec16836fc93d0c38072973e Mon Sep 17 00:00:00 2001 From: Peter Kerpedjiev Date: Sat, 13 Feb 2021 11:22:33 -0800 Subject: [PATCH 3/3] More doc updates --- docs/usage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/usage.md b/docs/usage.md index f3db72d6..bfa74f99 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -164,7 +164,7 @@ const worker = await spawn(BlobWorker.fromText(MyWorker)) // Now use this worker as always ``` -This can be used with a two-config webpack configuration to create the single bundle. The first config builds the worker and the second builds the library that uses it. The two can be linked together using the `WaitPlugin` described in [this article](https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/). Example `webpack.config.js`: +This can be used with a two-config webpack configuration to create the single bundle. The first config builds the worker and the second builds the library that uses it. The two are built sequentially using the `WaitPlugin` described in [this article](https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/). Example `webpack.config.js`: ```js class WaitPlugin extends WebpackBeforeBuildPlugin {