将参数传递给 webpack 加载器的内联导入

Question

我有一个未弹出的 create-react-app (react-scripts v3.4.3) 和 Typescript 应用程序，我正在尝试在其中使用 web 工作人员。我能够使用以下方法将工作人员与 workerize-loader 捆绑在一起进口声明：

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

问题是我需要更改加载程序的 publicPath 属性而不从 create-react-app 弹出，所以我尝试添加 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?publicPath="path/to/js/"!./worker';

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

webpack 文档中提到的查询参数是否仅用于webpack.config.js 中的module.rules 属性？

Answer 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();