将参数传递给Webpack加载程序的内联导入

问题描述

我有一个未弹出的create-react-app（react-scripts v3.4.3）和Typescript应用程序，我正在尝试使用网络工作者。我能够使用以下方法将工作者与workerize-loader捆绑在一起：以下导入语句：

select KEY,CODE from table1
where IND = '1'
UNION(NOT UNION ALL)
select CODE,ORG_CODE from table2
join ORG on KEY = KEY
join REGION on KEY = KEY

问题是我需要更改加载程序的publicPath属性，而不必从create-react-app中弹出，因此我尝试添加web inline loaders的webpack文档中提到的查询参数：

选项可以与查询参数一起传递，例如？key = value＆foo = bar或JSON对象，例如？{“ key”：“ value”，“ foo”：“ bar”}

// eslint-disable-next-line import/no-webpack-loader-Syntax
import Worker from 'workerize-loader!./worker';

我已经尝试了两种方法，但是都返回了“找不到模块...”相同的Typescript编译器错误

webpack文档中提到的查询参数仅用于// eslint-disable-next-line import/no-webpack-loader-Syntax import Worker from 'workerize-loader?publicPath="path/to/js/"!./worker';的{{1}}属性中吗？

解决方法

该问题实际上根本与Webpack无关，而只是一个Typescript问题。

我不确定这是否完全正确，但是我将把解决方案留给那些试图让workerize-loader使用create-react-app和Typescript的人。

我结合了来自worker-loader with Typescript的指令，并使用了workerize-loader的publicPath选项（虽然没有记录，但在src中）。

在我的模块声明文件中，我刚刚使用publicPath值声明了模块，然后在导入工作程序模块时匹配了声明。假设这些文件都位于名为src/worker的目录下。最后一个文件显示了如何调用worker方法。

src/worker/custom.d.ts

declare module 'workerize-loader?publicPath=new/public/path/!*' {
  class WebpackWorker extends Worker {
    constructor();

    // Add any custom functions to this class.
    // Make note that the return type needs to be wrapped in a promise.
    
    someLongOperation(): Promise<string>;
  }

  export = WebpackWorker;
}

src/worker/index.ts

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'workerize-loader?publicPath=new/public/path!./worker';

export default Worker;

src/worker/worker.ts

export function someLongOperation(): string {
  // doing long lasting operation
  // ...

  return 'result of long operation';
}

src/someService.ts

import Worker from 'src/worker';

...

const myWorker = new Worker();
cosnt workerResult = await myWorker.someLongOperation();

create-react-app typescript typescript typescript webpack webpack webpack worker-loader