我的目标是与thread-loader
一起运行less-loader
。我还想用watch
运行webpack,以便在开发期间进行更改时重建我的项目。
我尝试过几种组合:
thread-loader
less-loader
使用网络包解析器(请参阅下面的错误)thread-loader
less-loader
使用较少的解析器(手表不起作用)对于这两个选项,我使用以下较少的文件
main.less
body {
display: flex;
}
使用选项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,webpack的watch
功能似乎中断,编译错误后仍未监视较少的文件(仍然正确监视js文件)。因此,例如,如果您在监视模式下运行webpack并对导致编译错误的较少文件进行更改,则修复错误将不会导致webpack重建项目。我还使用--progress
运行webpack并验证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
相同的错误。
作为参考,我使用以下库: