javascript - 阻止 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))
}

Webpack 配置

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 文件的处理委托(delegate)给我的加载器？

Answer 1

我想我已经弄明白了，尽管它似乎是一个未记录的功能(至少，我在 configuration docs 上找不到它。

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

此属性位于 JSON schema 中，Webpack 使用它来验证配置对象。

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