【问题标题】：Prevent Webpack's default loaders from running阻止 Webpack 的默认加载器运行
【发布时间】：2018-05-02 06:25:34
【问题描述】：

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

【问题讨论】：

用const config = require('./config.json');怎么样？
这里的目标是让import './config.json' 在构建时将 JSON 编译为可执行的 JS，因为当前应用程序只是将我们的 JSON 对象嵌入到应用程序包中并在运行时执行此工作。由于这是我们应用程序中的一项资源密集型任务，并且由于 JSON 是常量，我们希望将 JSON 直接编译为可执行代码
检查这个stackoverflow.com/questions/35563915/…希望它有帮助（如果它有效 - 请自行创建/确认答案）

标签： javascript json webpack webpack-loader

【解决方案1】：

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

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

该属性在JSON schema 中，Webpack 使用它来验证配置对象。

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

【讨论】：