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

Question

我可能遗漏了一些明显的东西，但我似乎无法创建一个 Webpack 4 加载器作为一个可以接受 options:

的简单函数

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

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

谁能帮我们举个最基本的例子，说明如何让这样的东西发挥作用？

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

Answer 1

Webpack 加载器应该简单地导出一个函数，该函数 returns 一串代码和一个可选的源映射。

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 is used in most loaders to easily get the options passed to it from the Webpack configuration file. 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：将加载器创建为函数（具有发送选项的能力）

Webpack 4: Creating loaders as functions (with the ability to send options)

webpack

webpack-loader

webpack-4