Блог

Главная - Вопросы по программированию - Как вы используете веб-работников с Webpack 5?

Как вы используете веб-работников с Webpack 5?

#javascript #typescript #webpack #webpack-dev-server #web-worker

Вопрос:

Я изо всех сил пытался найти лучший способ использовать веб-работников, используя Webpack 5 и typescript. Я стараюсь следовать документации, однако, когда я пытаюсь создать веб-работника, я испытываю следующую ошибку:

 Uncaught DOMException: Worker constructor: Failed to load worker script at "d:ProjectSeamCarvingjsdist0.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.

Комментарии:

1. дайте рабочему загрузчику попробовать даже на V 5 импортировать рабочего из «рабочий загрузчик!./$Путь

2. @RobertRowntree Спасибо за предложение, но я действительно хочу избежать использования загрузчиков в этом случае, так как они не нужны в Webpack 5, как написано в официальной документации .

3. @Quinn как вы заставили его работать с ts_loader, потому что я получаю сообщение об ошибке новый работник(новый URL(‘./worker.js’, import.meta.url)); в этой строке при комплектации и в ней говорится, что может потребоваться дополнительный загрузчик. я могу заставить его работать с webpack-загрузчиком и webpack 4. Как я могу перейти на webpack5

Ответ №1:

Я решил свою проблему,

Неправильный блок вывода:

 output: {
    publicPath: path.resolve(__dirname, "js/dist/"),
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
}

publicPath в этом случае устанавливается использование абсолютного пути. Поэтому, когда я попытался запустить его через сервер, он служил file:// бы вместо сквозного http:// . Поскольку Chrome (и я полагаю, что большинство современных браузеров) не позволяют загружать локальные файлы в виде сценариев по соображениям безопасности, он блокировал его.

Первоначально я думал, что, возможно, это была какая-то проблема с использованием typescript, однако я узнал, что это была просто неправильная конфигурация, из-за которой скрипт всегда использовал абсолютное значение.

Исправленный выходной блок:

 output: {
    publicPath: "js/dist/",
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
}
Метки: