reactjstypescriptbabel-loaderworker-loader

How to get the compiled file path with hashed of worker.js loaded from worker loader


I have a typescript react application which is using babel and webpack for compilation I have written a rule to load my worker with

config.module.rules.unshift({
      test: /gif\.worker\.js$/,
      use: {
        loader: 'worker-loader',
        options: {
          filename: 'static/js/[name].[contenthash:8].js',
          publicPath: '/',
        },
      },
    });

now I wanted to get the output path of this worker in my typescript code to create a worker instance

I am using gif.js.optimized which require worker path to create workers

const gif = new GIF({
      workers: 2,
      quality: 10,
      height: height,
      width: width,
      workerScript: workerPath,
    });

the worker path should be something like [baseurl]/static/js/gif.worker.[hash].js


Solution

  • Instead of worker-loader just used as file loader and its working fine

    {
      test: /gif\.worker\.js)$/,
      use: {
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/js/[name].[contenthash:8].[ext]',
        },
      },
    }