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

Question

我有一个未弹出的 create-react-app（react-scripts v3.4.3）和 Typescript 应用程序，我正在尝试在其中使用 web worker。我能够让 worker 与 workerize-loader 使用以下导入语句：

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

问题是我需要更改加载器的 publicPath 属性而不从 create-react-app 中弹出，所以我尝试添加查询参数，如 inline loaders 的 webpack 文档所述：

Options can be passed with a query parameter, e.g. ?key=value&foo=bar, or a JSON object, e.g. ?{"key":"value","foo":"bar"}

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

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

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

Answer 1

这个问题实际上与 Webpack 完全无关，而是一个 Typescript 问题。

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

我结合了 workerize-loader 的 worker-loader with Typescript and using the publicPath option (though not documented but in the 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();

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

Pass params to inline import of webpack loader

typescript

webpack

create-react-app

worker-loader