override built-in json-loader in webpack 4

Question

I have my own json-loader which I want to use instead of the built-in loader. This used to work in webpack-3; in webpack-4 my loader gets called but the results get passed to the built-in loader, which then errors out because what it's being fed is JS source, not json. How can I prevent the buit-in json-loader being called? My webpack.cofig.ts looks like this:

import * as webpack from 'webpack'
import * as path from 'path'

const config = {
  mode: 'production',
  node: { fs: 'empty' },
  resolveLoader: {
    alias: { 'custom-json-loader': 'zotero-plugin/loader/json' },
  },
  module: {
    rules: [ { test: /\.json$/, use: [ 'custom-json-loader' ] } ],
  },

  // ...
}

export default config

Answer 1

You have to tell webpack that your loader emits javascript and not json. To do so you must add type: "javascript/auto" to your loader configuration:

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

Changelog for Webpack 4