1

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

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

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

有人可以通过最基本的例子来帮助我们如何让这样的事情起作用吗？

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

4

1 回答 1

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编写加载程序的指南。

于 2018-09-26T19:58:08.730 回答