title: Webpack file-loader publicPath
body: <p>I have a react project in which I'm using webpack 3.10.0 with file loader 1.1.6 to move some images and json files into my distribution folder.</p>
  
  <p>Webpack emits the files as expected, but react receives the wrong urls for my json and images assets</p>
  
  <p>My markup looks like:</p>
  
  <pre><code>&lt;img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
  alt="Hello World!!"&gt;
  </code></pre>
  
  <p>but should be:</p>
  
  <pre><code>&lt;img src="/assets/images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
  alt="Hello World!!"&gt;
  </code></pre>
  
  <p>My folder structure looks like below:
  <code>
  C:.
  ├───dist
  │   └───assets
  │       ├───css
  │       ├───data
  │       ├───images
  │       └───js
  ├───src
  │   ├───css
  │   ├───data
  │   ├───images
  │   └───js
  │       ├───actions
  │       ├───components
  │       ├───containers
  │       └───reducers
  └───tests
  </code></p>
  
  <p>I thought file-loader publicPath should take care of this, but it seems I'm either misunderstanding or something is wrong with my configuration. 
  Can someone be so kind to help me out?</p>
  
  <p>webpack.config.js</p>
  
  <pre><code>var path = require('path');
  const ExtractCSS = require("extract-text-webpack-plugin");
  
  module.exports = {
    entry: [
      './src/js/index.js'
    ],
    output: {
      path: path.resolve(__dirname, 'dist/assets/js'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env','react']
            }
          }
        },
        {
          test: /\.scss$/,
          loader: ExtractCSS.extract('css-loader!sass-loader')
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name (file) {
                  /*if (env === 'development') {
                    return '[path][name].[ext]'
                }*/
                  return '[name]_[hash].[ext]'
                },
                publicPath: '/assets/images/',
                outputPath: '../images/'
              }  
            }
          ]
        },
        {
          test: /\.json$/,
  
          use: [
            {
              loader: 'file-loader',
              options: {
                name (file) {
                  /*if (env === 'development') {
                    return '[path][name].[ext]'
                }*/
                  return '[name].[ext]'
                },
                publicPath: '/assets/data/',
                outputPath: '../data/'
              }  
            }
          ]
        }
      ]
    },
    plugins: [
      new ExtractCSS('../css/app.css', {
          allChunks: true
      }) 
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    },
    //devtool: 'eval-source-map',
    devServer: {
      historyApiFallback: true,
      contentBase: './dist/'
    }
  };
  </code></pre>