在使用Webpack 5和typescript的同时，我一直在努力寻找使用Web Worker的最佳方法。我尝试遵循文档，但是，当我尝试创建Web Worker时，我遇到以下错误：
Uncaught DOMException: Worker constructor: Failed to load worker script at "d:\Project\SeamCarving\js\dist0.bundle.js"我不知道为什么它试图从我的本地系统访问文件，而不是通过开发服务器，如：http://localhost:8080/js/dist0.bundle.js。
代码如下：
if (window.Worker) {
let worker = new Worker(new URL("./image-worker", import.meta.url));
worker.onmessage = function (message) {
return receiveMessage(message);
};
worker.onerror = function (message) {
console.log("ERROR: ", message.error);
console.log(message.message, message.filename, message.lineno);
};
}webpack.config.js
const path = require('path');
module.exports = {
entry: './js/main.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: path.resolve(__dirname, 'js')
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
devtool: 'source-map',
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, './'),
publicPath: path.resolve(__dirname, '/js/dist/'),
},
output: {
publicPath: path.resolve(__dirname, "js/dist/"),
filename: "bundle.js",
path: path.resolve(__dirname, 'js/dist'),
}
}到目前为止，我找到的所有资源都使用worker-loader，但据我所知，Webpack 5使其过时。
在GitHub上查看完整项目。
2条答案
按热度按时间yuvru6vn1#
我发现了我的问题，
错误输出块：
在本例中，
publicPath被设置为使用绝对路径。因此，当我尝试通过服务器运行它时，它将作为file://而不是通过http://运行。由于Chrome（我相信大多数现代浏览器）出于安全原因不允许您将本地文件作为脚本加载，因此它会阻止它。最初，我认为这可能是使用typescript的某种问题，然而，我了解到这只是一个错误的配置，导致脚本总是使用绝对值。
修正输出块：
ahy6op9u2#
在我将我的项目从angular 12升级到angular 13（包括从webpack 4升级到webpack 5）之后，我遇到了这个问题。
//在升级之前，从'worker-loader！./test.worker.bundle. js'导入 * as testworker;
//升级到webpack 5后const testworker = new Worker（new URL（“test.worker.bundle.js”，import. meta.url））;
升级到webpack 5后，我不得不如上所述进行更改，以使ng build成功。但当我们运行ng serve的命令时，得到runtime错误'*DOMException：无法构造“工作者”：脚本位于'file：：///js文件的路径' 'http：//localhost：test.worker.bundle.js'无法从源' http：//localhost：4200 '访问。
我也试着在配置文件中调整输出块。他们都没有解决这个问题。
如果有什么地方需要改变，请告诉我。