Можно ли использовать потоковый загрузчик и менее загруженный веб-пакет с опцией просмотра?

Моя цель - бежать thread-loader вместе с less-loader, Я также хотел бы запустить веб-пакет с watch так что мой проект перестраивается по мере внесения изменений в процессе разработки.

Я попробовал несколько комбинаций:

  1. thread-loader с less-loader с помощью распознавателя веб-пакетов (см. ошибку ниже)
  2. thread-loader с less-loader использование меньшего резольвера (часы не работают)

Для обоих вариантов я использую следующий файл меньше

main.less

body {
  display: flex;
}

Вариант 1 (распознаватель веб-пакетов)

С опцией 1 webpack выдает следующую ошибку

ERROR in ./main.less
Module build failed: TypeError: Cannot read property 'bind' of undefined
    at createWebpackLessPlugin (/src/threadloader/node_modules/less-loader/dist/createWebpackLessPlugin.js:37:49)
    at getOptions (/src/threadloader/node_modules/less-loader/dist/getOptions.js:25:26)
    at Object.lessLoader (/src/threadloader/node_modules/less-loader/dist/index.js:29:42)

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    css: './main.less',
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'thread-loader',
          'css-loader',
          'less-loader',
        ],
      }
    ],
  },
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle',
  },
  watch: true,
};

Вариант 2 (меньше резольвера)

С вариантом 2, веб-пакеты watch кажется, что функциональность нарушена, и меньше файлов не просматривается после ошибки компиляции (js-файлы по-прежнему корректно просматриваются). Так, например, если вы запускаете webpack в режиме просмотра и вносите изменения в меньший файл, который вызывает ошибку компиляции, исправление ошибки не приведет к перекомпоновке проекта webpack. Я также запустил веб-пакет с --progress и проверил, что webpack не принимает изменения в файле less после ошибки компиляции.

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    css: './main.less',
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'thread-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              paths: ['./node_modules'],
            },
          },
        ],
      }
    ],
  },
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle',
  },
  watch: true,
};

Лучший обходной путь, который я нашел, - это просто использовать вариант 1 без thread-loader, Сборка занимает немного больше времени, но по крайней мере watch работает. Это хорошо, но если есть какой-то способ использования thread-loader, это было бы прекрасно. Я также пытался HappyPack, но я вижу ту же ошибку, что и с thread-loader,

Для справки я использую следующие библиотеки:

  • вебпак 3.11.0
  • менее 3.0.1
  • менее загруженный 4.0.5
  • загрузчик потока 1.1.2
  • css-загрузчик 0.28.9

0 ответов

Другие вопросы по тегам