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 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:

If you haven't install webpack-cli, you need to install it.

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!