A simple way to use Web Worker with React-Create-APP – No eject needed

The problem of using Web Worker with an app that start with create-react-app is that:

create-react-app hide its webpack config from user to modify, if not ejected.
You need to modify webpack config in order to emit worker file.
If ejected, the webpac…


This content originally appeared on DEV Community and was authored by AnxinYang

The problem of using Web Worker with an app that start with create-react-app is that:

  • create-react-app hide its webpack config from user to modify, if not ejected.
  • You need to modify webpack config in order to emit worker file.
  • If ejected, the webpack.config is overwhelming and hard to modify.
  • worker-loader is not very typescript-friendly.

A Solution

We can generator worker.js by running another webpack thread that only take care worker files. Here are what we need to do:

I'm using typescript, so let's install the ts-loader.

Then, add a webpack.config.js file at project root like this:

const path = require('path');
const webpack = require('webpack');

const src = path.resolve(__dirname, './src');
const build = path.resolve(__dirname, './public'); // output worker.js to public folder


const tsLoader = {
  loader: 'ts-loader',
  options: { compilerOptions: { module: 'esnext', noEmit: false } }
}


module.exports = {
  mode: 'none',
  target: "webworker", //Importan! Use webworker target
  entry: './src/worker.ts',
  output: {
    filename: 'worker.js',
    path: build
  },
  resolve: {
    modules: ["node_modules", src],
    extensions: [".js", ".json", ".jsx", ".ts", ".tsx"],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ],
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: [tsLoader]
      },

    ]
  }
};

Note, we need to change the following config:

  • Change output to ./public folder so react-scripts can use it.
  • The target needs to be webworker.
  • Add compilerOptions: {..., noEmit: false, ...} to ts-loader options. This will overwrite the noEmit:true in the tsconfig.json that created by create-react-app.

then, add a npm script to package.json and run it:

...
 "worker": "webpack --watch",
...

And, in you app:

const worker = new Worker('worker.js');

Now, start your react app and enjoy your worker.

PS:

I know this solution is not the best one, if you have any other suggestion, please leave a comment and let me know. Thanks!


This content originally appeared on DEV Community and was authored by AnxinYang


Print Share Comment Cite Upload Translate Updates
APA

AnxinYang | Sciencx (2021-04-24T05:24:54+00:00) A simple way to use Web Worker with React-Create-APP – No eject needed. Retrieved from https://www.scien.cx/2021/04/24/a-simple-way-to-use-web-worker-with-react-create-app-no-eject-needed/

MLA
" » A simple way to use Web Worker with React-Create-APP – No eject needed." AnxinYang | Sciencx - Saturday April 24, 2021, https://www.scien.cx/2021/04/24/a-simple-way-to-use-web-worker-with-react-create-app-no-eject-needed/
HARVARD
AnxinYang | Sciencx Saturday April 24, 2021 » A simple way to use Web Worker with React-Create-APP – No eject needed., viewed ,<https://www.scien.cx/2021/04/24/a-simple-way-to-use-web-worker-with-react-create-app-no-eject-needed/>
VANCOUVER
AnxinYang | Sciencx - » A simple way to use Web Worker with React-Create-APP – No eject needed. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/24/a-simple-way-to-use-web-worker-with-react-create-app-no-eject-needed/
CHICAGO
" » A simple way to use Web Worker with React-Create-APP – No eject needed." AnxinYang | Sciencx - Accessed . https://www.scien.cx/2021/04/24/a-simple-way-to-use-web-worker-with-react-create-app-no-eject-needed/
IEEE
" » A simple way to use Web Worker with React-Create-APP – No eject needed." AnxinYang | Sciencx [Online]. Available: https://www.scien.cx/2021/04/24/a-simple-way-to-use-web-worker-with-react-create-app-no-eject-needed/. [Accessed: ]
rf:citation
» A simple way to use Web Worker with React-Create-APP – No eject needed | AnxinYang | Sciencx | https://www.scien.cx/2021/04/24/a-simple-way-to-use-web-worker-with-react-create-app-no-eject-needed/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts