Question

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

我制作了minimal plunk来演示我的环境（我还将在下面粘贴代码以供后代使用。）

问题是，辅助文件的分辨率不符合预期。如果启动index.html（我正在使用HTTP服务器为根文件夹提供服务），它自然可以解析../dist/TestMain.js，但是它会尝试从TestWorker.js解析相对于./的{{1}} index.html。我希望它相对于./从TestMain.js解析。

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

通常，我会全力以赴使用resolve.alias，但是输出应该能够放到任何由该文件夹引用的文件夹中（主JS文件和辅助JS文件将保留在同一文件夹中）。 HTML页面。

我还看到我可以在工作程序中进行排队，但是我想避免这种情况，因为它会使工作程序模糊（可能导致其他类型的引用问题）。

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

结构如下：

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

为工作加载程序指定publicPath选项：

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

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

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

1 个答案: