Webpack 4中如何禁用内置json-loader，改用自定义json-loader？

这个问题我之前帮别人排查过，Webpack 4 对 .json 文件的处理逻辑确实和 3 不一样——它默认启用了内置的 json-loader，而且优先级很高，导致你的自定义 loader 处理完后，内置的还会再跑一遍，把你输出的 JS 源码当成 JSON 解析，自然就报错了。

解决起来其实很简单，核心就是禁用 Webpack 内置的 json 模块处理规则，具体操作如下：

关键配置修改 #

在你的 webpack.config.ts 的 module.rules 里，针对 .json 文件的规则添加 type: 'javascript/auto'，这个配置是明确告诉 Webpack：「别用你内置的 json 处理逻辑，我自己来」。

给你一个具体的配置示例：

// webpack.config.ts
import path from 'path';

export default {
  // ...其他配置项（entry、output 等）
  module: {
    rules: [
      // 其他 loader 规则（比如 ts-loader、css-loader 等）
      {
        test: /\.json$/,
        use: ['path/to/your-custom-json-loader'], // 替换成你的自定义 loader 路径或名称
        type: 'javascript/auto', // 核心配置：禁用内置 json-loader
        // 可选：添加 include/exclude 限定处理范围，避免不必要的文件匹配
        include: path.resolve(__dirname, 'src'),
      },
    ],
  },
};

原理说明 #

Webpack 4 开始引入了「模块类型（module type）」的概念，.json 文件默认被归类为 json 类型，这种类型会自动触发内置的 json-loader 去解析内容。而设置 type: 'javascript/auto' 后，Webpack 会把 .json 文件当作普通 JavaScript 模块处理，完全遵循你配置的 loader 链，不会再调用内置的 json-loader 了。

只要你的自定义 loader 最终输出的是合法的 JavaScript 模块代码（比如通过 module.exports 导出处理后的内容），这个配置就能完美还原 Webpack 3 的运行效果。

内容的提问来源于stack exchange，提问作者retorquere