Webpack 4:将加载器创建为函数(具有发送选项的能力)

Question

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

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

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

有人可以帮助我们提供最基本的示例，说明如何使这样的事情发挥作用吗？

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

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