Можно ли использовать потоковый загрузчик и менее загруженный веб-пакет с опцией просмотра?
Моя цель - бежать thread-loader
вместе с less-loader
, Я также хотел бы запустить веб-пакет с watch
так что мой проект перестраивается по мере внесения изменений в процессе разработки.
Я попробовал несколько комбинаций:
thread-loader
сless-loader
с помощью распознавателя веб-пакетов (см. ошибку ниже)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