title: json-loader in webpack.config.js not working
body: <p>I'm trying to follow a react tutorial, My webpack.config.js file is as follows:</p>
  
  <pre><code>var webpack = require("webpack");
  var pth = require("path");
  
  module.exports = {
  entry: "./src/index.js",
  output: {
      path: __dirname + "/dist",
      filename: "bundle.js"
  },
  devServer: {
      inline: true,
      contentBase: './dist',
      port: 3000
  },
  module: {
      rules: [
        { test: /\.js$/, exclude: /(node_modules)/, use: 'babel-loader' },
        { test: /\.json$/, exclude: /(node_modules)/, use: 'json-loader' }
      ]
    }
  } 
  </code></pre>
  
  <p>While my Code files are as follows: I have made components here in lib.js and rendering is being done in index.js which ultimately is called in a HTML div in index.html</p>
  
  <p>lib.js</p>
  
  <pre><code>import React from 'react'
  import text from './titles.json'
  
  export const hello = (
  &lt;h1 id='title'
      className='header'
      style={{backgroundColor: 'purple', color: 'yellow'}}&gt;
      {text.hello}    
  &lt;/h1&gt;
  )
  
  
  export const goodbye = (
  &lt;h1 id='title'
      className='header'
      style={{backgroundColor: 'white', color: 'red'}}&gt;
      {text.goodbye}    
  &lt;/h1&gt;
  )
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react'
  import {render} from 'react-dom'
  import {hello, goodbye} from './lib'
  
  
  const design = {
  backgroundColor: 'red',
  color: 'white',
  fontFamily:'verdana'
  }
  
  
  render(
  &lt;div&gt;
      {hello}
      {goodbye}
  &lt;/div&gt;,    
  document.getElementById('react-container')
  )
  </code></pre>
  
  <p>When I run <code>webpack -w</code> command, I experience the following error</p>
  
  <pre><code>ERROR in ./src/titles.json
  Module parse failed: Unexpected token m in JSON at position 0
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token m in JSON at position 0
  at Object.parse (native)
  at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:447:3)
  @ ./src/lib.js 12:14-38
  @ ./src/index.js
  
  ERROR in chunk main [entry]
  bundle.js
  Cannot read property 'replace' of undefined
  </code></pre>
  
  <p>My JSON file is as follows: 
  titles.json</p>
  
  <pre><code>{
      "hello": "Bonjour!",
      "goodbye": "Au Revoir"
  
  }
  </code></pre>
  
  <p>My Module verions are as follows:
  webpack 4.1.1
  json-loader 0.5.7</p>
  
  <p>I have installed webpack and json-loader globally using npm install
  TIA</p>