阻止 Webpack 的默认加载程序运行

Question

Webpack 内置了一个 JSON 加载器。如何编写不尝试对结果运行内置 JSON 加载程序的自定义加载程序？

基本上，我希望我的加载器接收一个配置对象(存储在 JSON 文件中(并从该配置生成源代码，该配置不再是有效的 JSON，它是 JavaScript(随后可以通过 babel-loader 馈送(。

这是一个非常愚蠢，人为的例子。源文件是一个 JSON 文件，但我希望我的加载器的输出是一些 JS。

装载 机

function compile(doc) {
return `alert(${JSON.stringify(doc.title)})`
}
function myLoader(source) {
return compile(JSON.parse(source))
}

网络包配置

rules: [
{
test: /.json$/,
use: [
'babel-loader',
'my-loader',
],
},
],

相反，我最终收到此错误：

ERROR in ./config.json
Module parse failed: Unexpected token ' in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token ' in JSON at position 0
at JSON.parse (<anonymous>)
at JsonParser.parse (.../node_modules/webpack/lib/JsonParser.js:15:21)

从堆栈跟踪中可以看出，它来自webpack/lib/JsonParser.js.如何告诉 Webpack 首先不要运行其内置的 JSON 解析器，而是将与此规则匹配的 JSON 文件的处理委托给我的加载器？

Answer 1

我想我想通了，尽管它似乎是一个未记录的功能(至少，我在配置文档中找不到它。

看起来您可以在 Rule 对象中传递的属性之一是type。通过将其设置为javascript/auto，您可以覆盖默认的 JSON 解析器，并让它将文件的源解析为 JavaScript。

此属性位于 Webpack 用于验证配置对象的 JSON 模式中。

rules: [
{
test: /.json$/,
use: [
'babel-loader',
'my-loader',
],
type: 'javascript/auto',
},
],