title: import json file in react, webpack config error
body: <p>I am trying to import a json file into my code. The js file for the same is</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom' ;
  import $ from 'jquery' ;
  import data from './data.json';
  
  class ExpenseApp extends React.Component{
    render(){
      return(
          &lt;div&gt;{data.Author}&lt;/div&gt;
        )
    }
  }
  
  
  ReactDom.render(&lt;ExpenseApp/&gt;,document.getElementById('container'));
  </code></pre>
  
  <p>I already have json loader installed and webpack config file is like this--</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  var node_dir = __dirname + '/node_modules',
      lib_dir = __dirname + '/public/libraries';
  
  var config = {
      // The resolve.alias object takes require expressions 
      // (require('react')) as keys and filepath to actual
      // module as values
      resolve: {
          alias: {
              react: lib_dir + '/react',
              "react-dom": lib_dir + '/react-dom',
              "jquery": lib_dir + '/jquery-3.2.1.js'
          },
          extensions:['','.js','.jsx','.json']
      },
      plugins: [
  
          new webpack.optimize.CommonsChunkPlugin({ // 
              name: 'vendors',
              filename: 'build/vendors.bundle.js',
              minChunks: 2,
          }),
  
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin()
      ],
  
      entry: {
          musicApp: ['./public/js/expense-app.js', 'webpack/hot/only-dev-server'],
          vendors: ['react', 'react-dom', 'jquery', 'webpack/hot/only-dev-server']
      },
  
      output: {
          path: path.join(__dirname, "public"),
          filename: 'build/[name].bundle.js',
          libraryTarget: "umd"
      },
  
      module: {
  
          noParse: [
              new RegExp(lib_dir + './react.js'), 
              new RegExp(lib_dir + './react-dom.js')
          ],
          rules: [
               {
                  test: /\.js?$/,
  
                  loaders: ['react-hot-loader/webpack', 'babel-loader'],
                  include: path.join(__dirname, 'public')
  
              }, 
              {
                  loader: 'babel-loader',
                  query: {
                      presets: ['react', 'es2015']
                  },
                  include: path.join(__dirname, 'public')
              }
          ]
      }
  }
  
  module.exports = config;
  </code></pre>
  
  <p>The data.json file is--</p>
  
  <pre><code>var data={
      "Author":"Dan Brown",
      "Book":"Inferno",
  }
  module.exports=data;
  </code></pre>
  
  <p>I was getting 'cannot resolve data.json' error at first so I added extensions in resolve of webpack.
  Now also,I am getting the same
  <a href="https://i.stack.imgur.com/rQanA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rQanA.png" alt="Error"></a></p>
  
  <p>Also, I tried adding json-loader in loaders[] inside modules, but then also I was getting errors.
  And the folder structure is like this
  <a href="https://i.stack.imgur.com/sKSAU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sKSAU.png" alt="Folder"></a></p>
  
  <p>How can I resolve this?</p>