时间戳

首页 > 解决方案 > 阻止 Webpack 的默认加载器运行

javascript - 阻止 Webpack 的默认加载器运行

问题描述

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

标签： javascriptjsonwebpackwebpack-loader

解决方案

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

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

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

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

推荐阅读