1

我webpack用来整理一个使用Web Workers. 为此，我正在使用worker-loader加载程序。

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

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

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

通常，我会全力使用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.

4

1 回答 1

0

指定publicPathworker-loader 的选项：

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

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

于 2019-08-21T17:15:33.257 回答