Webpack 使用 glob 表达式导入多个较少的文件？答案

【问题标题】：Webpack import multiple less files using glob expressions?Webpack 使用 glob 表达式导入多个较少的文件？
【发布时间】：2017-04-20 18:39:57
【问题描述】：

我一直在尝试使用 webpack 的 less-loader 自动导入 less 文件，但是 glob 表达式在 root.less 文件中不起作用。

详细来说，我正在用 webpack 替换 gulp builder，我可以使用这种模式：

@import 'widgets/**/*.less';

在 gulp 中自动导入更少的文件（请查看此链接glob expressions）。但是，这种模式在 webpack 中无效，less-loader 似乎也不支持。

我尝试使用require.context webpack的方法，但无法调整顺序或文件导入。因为我使用全局变量（mixins、颜色代码等），所以我需要按逻辑顺序减少文件。因此，此选项也不可用。

import '../components/variables.less'; 
importAll(require.context('../components/', true, /\.less$/)); // Cannot set a sequence. 
// 'Variables' cannot be found even though I added it above

所以，看来我必须手动导入每个文件，这真的很痛苦。这就是为什么我想知道有没有办法自动导入文件？

感谢您的帮助！

【问题讨论】：

less-loader seems 支持 Less 自己的插件，所以很可能你可以使用 less-plugin-glob 。
感谢您的回复！是的，我已经尝试过使用它，但是它会抛出错误github.com/webpack-contrib/less-loader/issues/190。
我在这里也发现了类似的问题stackoverflow.com/questions/42629652/…。我实际上有同样的问题。
plugin.install 不是函数 - 与this 的错误相同。你在那里错过了new。
嗯，你是对的 - 查看它的来源，我发现它已经返回了一个对象。那么抱歉，我不知道有什么问题（看起来它与webpack before 一起工作得很好）

标签： webpack less webpack-2

【解决方案1】：

我添加了paths 选项并且它有效：

...
{
    loader: 'less-loader',
    options: {
        paths: [
            path.resolve(path.join(__dirname, 'app'))
        ],
        plugins: [
            require('less-plugin-glob')
        ]
    }
}

工作示例：https://github.com/notagency/webpack2-with-less-plugin-glob

【讨论】：

感谢您的回复@Cold Shine，但您无需定义“路径”字段即可添加插件。在源代码中，“...clone(loaderUtils.getOptions(loaderContext))”获取插件。但是，我之前什至尝试过添加路径选项，但没有奏效。其次，你能分享你的 webpack 配置和 lib 版本吗？我已经花了很多时间，而且我很确定它不起作用。即使 webpack 可以使用这个插件（我修改了 less loader 插件代码），当你在 less 文件中定义 glob 变量时它也会抛出错误。
@SemihGk。我已将简化代码上传到 github github.com/notagency/webpack2-with-less-plugin-glob
@SemihGk 当然，你不必定义paths 来添加插件，但是如果paths 没有定义less-loader 在less-plugin-glob 之前启动createWebpackLessPlugin。它会在像@import 'widgets/**/*.less'; 这样的全局语句中引发错误，在这里查看源代码github.com/webpack-contrib/less-loader/blob/master/src/…
非常感谢您创建示例代码库。这是完美的工作。我尝试了我的项目，但不知何故没有运气。反正我有空再过一遍。至少我可以看到工作版本。再次感谢。
@SemihGk。凉爽的！乐意效劳！ :) 虽然这种解决方法可能与版本相关......

【解决方案2】：

我找不到适合 glob 模式路径的解决方案，但我决定动态创建我的 entryless 文件。遇到此问题的任何人都可以考虑此解决方案：

   // update entry less file
var dir = require('node-dir');

function updateEntryLessFile() {
    dir.readFiles(path.resolve(__dirname, 'path-for-less-files-folder'), {
        match: /.less$/
    },
    (err, context, next) => { next() },
    (err, files) => {
        if (err) throw err;
        var wstream = fs.createWriteStream(
            path.resolve(__dirname, 'path-to-entry/entry.less')
        );
        _.each(files, path => {
            const relativePath = path.split('client/')[1]; // get relative path from full path
            wstream.write(`@import '~${relativePath}';\n`);
        });
        wstream.end();
    });
}

// When less files are added or removed, it updates entry.less file.
var watcher = require('chokidar').watch(path.resolve(__dirname, 'client/'), {
  persistent: true,
  ignoreInitial: true
});

// Something to use when events are received.
var log = console.log.bind(console);
// Add event listeners.
watcher
  .on('add', path => {
      if (new RegExp('.less').test(path)) {
          log(`Less file: ${path} has been added`)
          updateEntryLessFile();
      }
  })
  .on('unlink', path => {
      if (new RegExp('.less').test(path)) {
          log(`Less file: ${path} has been removed`)
          updateEntryLessFile();
      }
  });

updateEntryLessFile();

因此，您可以在构建 webpack 之前或在 webpack 配置中运行它。

如果您找到更好的方法，请随时发布！谢谢。

【讨论】：