阻止 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 文件的处理委托给我的加载程序？

Answer 1

我想我明白了，尽管它似乎是一个未记录的功能（至少，我在 configuration docs.

上找不到它

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

这个属性在 Webpack 用来验证配置对象的 JSON schema 中。

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

阻止 Webpack 的默认加载器运行

Prevent Webpack's default loaders from running

javascript

json

webpack

webpack-loader

加载程序

Webpack 配置

阻止 Webpack 的默认加载器 运行

Prevent Webpack's default loaders from running

javascript

json

webpack

webpack-loader

加载程序

Webpack 配置

阻止 Webpack 的默认加载器运行