Webpack Worker Loader:如何使它作为依赖项工作？

Question

我有我的index.html导入依赖项.

<script src="node_modules/myModule/app.js"></script> 

Mymodule中/ app.js

var WebWorker = require('worker-loader!./worker');
window.WebWorker = new WebWorker();

该worker存在于node_modules/myModule/worker.js中

当我运行'webpack'时,它可以工作,因为它们位于同一个文件夹中.如果我在路径中更改了任何内容,webpack将不会根据需要选择webworker代码.

使用此模块作为依赖项时会出现问题,因为我需要将worker.js放在与index.html相同的路径中.

另一种方法是使用Blob并将worker作为Inline依赖项插入,但IE11不支持它们.

因此,我不知道是否有一个很好的选择让它发挥作用.

Answer 1

您应该为您的工作人员选择命名模式，比方说：

myWorkerModule.worker.js

然后配置 webpack 工作加载器来处理具有该模式的所有文件。这是 webpack.config 的相关部分：

module: {
    rules: [
        {
            test: /\.worker\.js$/,
            use: { loader: 'worker-loader' }
        }
    ]
}

现在，当您需要该工作模块作为依赖项时，只需输入

var myWorkerModule = require('./myWorkerModule.worker')

或者

import myWorkerModule from './myWorkerModule.worker'

希望能帮助到你。