相对于 JavaScript 文件的参考工作者

Question

我正在使用webpack 组合一个使用Web Workers 的项目。为此，我使用了worker-loader 加载程序。

我创建了一个minimal plunk 来演示我的环境（我还将粘贴下面的代码以供后代使用）。

问题是，工作文件的解析没有按预期运行。如果我启动index.html（我正在使用HTTP 服务器为根文件夹提供服务），它自然可以解析../dist/TestMain.js，但它会尝试从./ 相对于index.html 解析TestWorker.js。我希望它从./ 相对于TestMain.js 解决。

我尝试添加output.publicPath = "./"，但没有帮助。我已经在文档（和 worker-loader 的文档）中搜索了类似的选项，但没有发现任何我可以说是相关的（我可能是错的）。

通常情况下，我会全部使用resolve.alias，但输出应该能够被拖放到 HTML 页面可引用的任何文件夹中（主 JS 文件和工作 JS 文件将一起保留在同一个文件夹中） .

我还看到我可以内联工作程序，但我想避免这种情况，因为它会阻塞工作程序（可能导致其他类型的引用问题）。

我是否缺少启用相对引用的选项或我错过的解决方法？

结构如下：

Project
 |- dist
 |   |- TestMain.js
 |   |- TestWorker.js
 |- src
 |   |- workers
 |   |   |- TestWorker.js
 |   |- index.js
 |- test
 |   |- index.html
 |- webpack.config.js

这是我的 webpack.config.js：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "TestMain.js",
    path: path.resolve(__dirname, "dist"),
    library: "MyLib",
    libraryTarget: "umd"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, "src/workers"),
        ],
        use: {
          loader: "worker-loader",
          options: {
            name: "[name].js"
          }
        }
      }
    ]
  }
};

如果你愿意，我会分享我的其他文件，但如果工作文件与 index.html 位于同一文件夹中，它确实有效。

Answer 1

为 worker-loader 指定 publicPath 选项：

        use: {
          loader: "worker-loader",
          options: {
            name: "[name].js",
            publicPath: "/dist"
          }
        }

或者，您可以考虑在构建过程中添加一个步骤，将静态资产（包括 index.html）复制到 dist 文件夹。