webpack thread-loader和less-loader可以和watch选项一起使用吗?

时间:2018-02-18 19:17:18

标签: javascript webpack less-loader

我的目标是与thread-loader一起运行less-loader。我还想用watch运行webpack,以便在开发期间进行更改时重建我的项目。

我尝试过几种组合:

  1. thread-loader less-loader使用网络包解析器(请参阅下面的错误)
  2. thread-loader less-loader使用较少的解析器(手表不起作用)
  3. 对于这两个选项,我使用以下较少的文件

    main.less

    body {
      display: flex;
    }
    

    选项1(webpack解析器)

    使用选项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,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相同的错误。

    作为参考,我使用以下库:

    • webpack 3.11.0
    • less 3.0.1
    • less-loader 4.0.5
    • thread-loader 1.1.2
    • css-loader 0.28.9

0 个答案:

没有答案