Question

我可能遗漏了一些明显的东西，但是我似乎无法将Webpack 4加载器创建为一个简单的函数，可以使用options：

rules: [{
  test: /\.csv$/,
  loader: function() {
    // ...
  },
  options: {
    // ...
  }
}]

我不敢认为Webpack对于必须是npm软件包的加载器如此顽固，但是我正在努力寻找一个示例，其中使用简单函数作为加载器可以按预期工作。

有人可以为我们提供最基本的示例，以帮助我们实现这种工作吗？

P.S。在上面的示例配置中，该功能是从另一个文件导入的，为了清晰起见，只是内联添加了该功能。

Answer 1

Webpack加载器应仅导出一个函数，该函数返回代码字符串和可选的源映射。

var loaderUtils = require('loader-utils');

export default function(source) {
    const options = loaderUtils.getOptions(this) || {};
    // Get the value of options.testOption from Webpack config
    var testOption = options.testOption;

    // ...

    return `export default ${JSON.stringify(source)}`;
}

这是一个准系统示例。 loader-utils用于大多数加载器，以轻松地从Webpack配置文件中获取传递给它的选项。 schema-utils也可以合并以验证选项。

关于将这些代码放置在何处，请将其写入您想要的任何目录中的名为loader.js的文件中。在Webpack配置中使用它，如下所示：

rules: [{
    test: /\.csv$/,
    use: {
        loader: path.resolve(__dirname, 'src/loader.js'),
        options: {
            testOption: 'test string'
        }
    }
}]

有关更多信息，请参见Webpack的writing a loader指南。

Webpack 4：将加载程序创建为函数（具有发送选项的功能）

1 个答案: